railwatch 0.9.3 → 1.0.0

data/app/frontend/components/railwatch/env-switcher.tsx

@@ -1,145 +0,0 @@
-import { Link, router, usePage } from "@inertiajs/react"
-import { Check, ChevronsUpDown, Plus } from "lucide-react"
-
-import { LiveDot } from "@/components/railwatch/live-dot"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/components/ui/sidebar"
-import { cn } from "@/lib/utils"
-import {
-  applicationEnvironmentOverviewPath,
-  newApplicationPath,
-} from "@/routes"
-import type { SharedProps } from "@/types"
-
-function Monogram({ name, className }: { name: string; className?: string }) {
-  return (
-    <span
-      className={cn(
-        "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-md font-mono text-xs font-semibold",
-        className,
-      )}
-    >
-      {name.slice(0, 2).toUpperCase()}
-    </span>
-  )
-}
-
-// Application · environment switcher at the top of the sidebar. Mirrors the
-// Nightwatch app card: monogram, application name, environment name, and
-// a dropdown listing every environment across the account's applications.
-export function EnvSwitcher() {
-  const { applications, environment, embedded } = usePage<SharedProps>().props
-  if (applications.length === 0) return null
-  // Account-level pages (dashboard, issues) have no environment; fall back to
-  // the first application so the card still names something real.
-  const currentApp =
-    applications.find((a) => a.id === environment?.application_id) ??
-    applications[0]
-  // Embedded: one application, one environment, nothing to switch to. The
-  // card stays as a header (which app, which environment) with no menu.
-  if (embedded) {
-    const env = environment ?? currentApp.environments[0]
-    return (
-      <SidebarMenu>
-        <SidebarMenuItem>
-          <SidebarMenuButton
-            size="lg"
-            asChild
-            className="border-0 py-2 pr-3 pl-2 hover:bg-transparent"
-          >
-            <Link
-              href={applicationEnvironmentOverviewPath(currentApp.id, env.id)}
-              prefetch
-            >
-              <Monogram name={currentApp.name} />
-              <span className="grid flex-1 text-left leading-tight">
-                <span className="truncate text-sm font-semibold">
-                  {currentApp.name}
-                </span>
-                <span className="text-muted-foreground truncate text-xs">
-                  {env.name}
-                </span>
-              </span>
-            </Link>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    )
-  }
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent hover:bg-sidebar-accent border-0 py-2 pr-3 pl-2"
-            >
-              <Monogram name={currentApp.name} />
-              <span className="grid flex-1 text-left leading-tight">
-                <span className="truncate text-sm font-semibold">
-                  {currentApp.name}
-                </span>
-                <span className="text-muted-foreground truncate text-xs">
-                  {environment
-                    ? environment.name
-                    : `${currentApp.environments.length} environment${currentApp.environments.length === 1 ? "" : "s"}`}
-                </span>
-              </span>
-              <ChevronsUpDown className="size-3.5 opacity-60" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="start"
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-64"
-          >
-            {applications.map((app) => (
-              <div key={app.id}>
-                <DropdownMenuLabel className="label-caps">
-                  {app.name}
-                </DropdownMenuLabel>
-                {app.environments.map((env) => (
-                  <DropdownMenuItem
-                    key={env.id}
-                    onSelect={() =>
-                      router.visit(
-                        applicationEnvironmentOverviewPath(app.id, env.id),
-                      )
-                    }
-                  >
-                    <LiveDot
-                      lastSeenAt={env.paused ? null : env.last_seen_at}
-                      thresholdMs={10 * 60 * 1000}
-                    />
-                    <span className="flex-1">{env.name}</span>
-                    {env.id === environment?.id && (
-                      <Check className="size-3.5" />
-                    )}
-                  </DropdownMenuItem>
-                ))}
-              </div>
-            ))}
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onSelect={() => router.visit(newApplicationPath())}
-            >
-              <Plus className="size-3.5" />
-              Add application
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  )
-}

data/app/frontend/components/railwatch/filter-bar.tsx

@@ -1,153 +0,0 @@
-import { Filter as FilterIcon, Search, X } from "lucide-react"
-import { useState } from "react"
-
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import { parseFilter, serializeFilter } from "@/lib/filter"
-
-export interface FilterField {
-  key: string
-  label: string
-  options?: string[]
-}
-
-// key:value key2:value2 free text query bar: chips for parsed field tokens,
-// a raw-text input for typing (Enter/blur commits), and a field/option
-// autocomplete popover. Full width on phones, a search-box on desktop.
-export function FilterBar({
-  value,
-  fields,
-  onChange,
-  placeholder = "Filter...",
-}: {
-  value: string
-  fields: FilterField[]
-  onChange: (query: string) => void
-  placeholder?: string
-}) {
-  const [draft, setDraft] = useState(value)
-  const [open, setOpen] = useState(false)
-  // Re-sync the draft when `value` changes from outside (e.g. a chip removal
-  // round-tripping through the server, or browser back/forward) without an
-  // effect: https://react.dev/learn/you-might-not-need-an-effect
-  const [syncedValue, setSyncedValue] = useState(value)
-  if (value !== syncedValue) {
-    setSyncedValue(value)
-    setDraft(value)
-  }
-  const parsed = parseFilter(value)
-
-  const removeField = (key: string) => {
-    const next = { ...parsed.fields }
-    delete next[key]
-    const q = serializeFilter({ text: parsed.text, fields: next })
-    setDraft(q)
-    onChange(q)
-  }
-
-  const applyToken = (key: string, val: string) => {
-    const q = serializeFilter({
-      text: parsed.text,
-      fields: { ...parsed.fields, [key]: val },
-    })
-    setDraft(q)
-    onChange(q)
-    setOpen(false)
-  }
-
-  const startToken = (key: string) => {
-    setDraft((d) => `${d}${d && !d.endsWith(" ") ? " " : ""}${key}:`)
-    setOpen(false)
-  }
-
-  const commit = () => onChange(draft)
-
-  return (
-    <div className="flex flex-wrap items-center gap-2">
-      <div className="bg-card focus-within:border-ring flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md border px-2 md:max-w-md md:flex-none md:basis-80">
-        <Search className="text-muted-foreground size-3.5 shrink-0" />
-        {Object.entries(parsed.fields).map(([key, val]) => (
-          <Badge
-            key={key}
-            variant="secondary"
-            className="shrink-0 gap-1 rounded-sm px-1.5 font-mono text-[10px]"
-          >
-            {key}:{val}
-            <button
-              type="button"
-              onClick={() => removeField(key)}
-              className="hover:text-destructive"
-              aria-label={`Remove ${key} filter`}
-            >
-              <X className="size-3" />
-            </button>
-          </Badge>
-        ))}
-        <input
-          data-filter-bar-input
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && commit()}
-          onBlur={commit}
-          placeholder={placeholder}
-          className="placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent font-mono text-xs outline-none"
-        />
-        <kbd className="bg-muted text-muted-foreground hidden rounded px-1 font-mono text-[10px] md:inline">
-          /
-        </kbd>
-      </div>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="h-8 px-2"
-            aria-label="Add filter"
-          >
-            <FilterIcon className="size-3.5" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-56 p-0" align="start">
-          <Command>
-            <CommandList>
-              <CommandEmpty>No fields.</CommandEmpty>
-              {fields.map((f) =>
-                f.options ? (
-                  <CommandGroup key={f.key} heading={f.label}>
-                    {f.options.map((opt) => (
-                      <CommandItem
-                        key={opt}
-                        onSelect={() => applyToken(f.key, opt)}
-                      >
-                        {opt}
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                ) : (
-                  <CommandGroup key={f.key} heading={f.label}>
-                    <CommandItem onSelect={() => startToken(f.key)}>
-                      {f.key}:…
-                    </CommandItem>
-                  </CommandGroup>
-                ),
-              )}
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}

data/app/frontend/components/railwatch/flamegraph.tsx

@@ -1,324 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from "react"
-
-import { DataTable } from "@/components/railwatch/data-table"
-import { Segmented, SegmentedItem } from "@/components/railwatch/segmented"
-import { Input } from "@/components/ui/input"
-import {
-  type FlameNode,
-  type FlameRect,
-  hottestSelf,
-  hottestTotal,
-  layout,
-  parseCollapsed,
-  search,
-} from "@/lib/flamegraph"
-import { count, pct } from "@/lib/format"
-import { cn } from "@/lib/utils"
-
-const ROW = 18
-const HOTTEST = 15
-
-interface View {
-  tree: FlameNode
-  zoom: FlameNode[]
-  hovered: { rect: FlameRect; x: number; y: number } | null
-}
-
-// Frames read "Class#method (path:line)". The gem strips the Rails root
-// from app paths, so an app frame's path starts with app/, lib/ or config/;
-// a gem frame's path starts with the gem's name (activerecord/...), Ruby's
-// own with ruby/ or <internal:, and a C function has no file at all. Only
-// the app's own frames get the warm end of the palette.
-function isAppFrame(name: string): boolean {
-  const open = name.lastIndexOf(" (")
-  const path = open >= 0 ? name.slice(open + 2) : ""
-  return /^(app|lib|config|db|engines)\//.test(path)
-}
-
-function hashOf(value: string): number {
-  let h = 0
-  for (let i = 0; i < value.length; i++) h = (h * 31 + value.charCodeAt(i)) | 0
-  return Math.abs(h)
-}
-
-// Colour is a stable hash of the frame name so the same frame keeps the same
-// shade between renders and between profiles — warm oranges/ambers for app
-// frames, desaturated slate for everything else.
-function frameColor(name: string): string {
-  const h = hashOf(name)
-  return isAppFrame(name)
-    ? `hsl(${[24, 34, 14, 44, 4][h % 5]} 78% ${52 + (h % 3) * 6}%)`
-    : `hsl(${[215, 220, 210][h % 3]} 14% ${58 + (h % 3) * 7}%)`
-}
-
-function truncate(name: string, width: number): string {
-  const chars = Math.floor((width - 8) / 5.6)
-  if (chars < 4) return ""
-  return name.length <= chars ? name : name.slice(0, chars - 1) + "…"
-}
-
-function Tooltip({
-  rect,
-  total,
-  x,
-  y,
-}: {
-  rect: FlameRect
-  total: number
-  x: number
-  y: number
-}) {
-  return (
-    <div
-      className="bg-popover text-popover-foreground pointer-events-none absolute z-10 max-w-[min(22rem,90vw)] rounded-md border p-2 shadow-md"
-      style={{ left: Math.max(0, x - 8), top: y + 14 }}
-    >
-      <div className="font-mono text-[11px] break-all">{rect.node.name}</div>
-      <div className="text-muted-foreground mt-1 flex flex-wrap gap-x-3 font-mono text-[10px] tabular-nums">
-        <span>{count(rect.node.value)} samples</span>
-        <span>{pct(rect.node.value, total)} of total</span>
-        <span>{pct(rect.node.value, rect.parentValue)} of parent</span>
-        {rect.node.self > 0 && <span>{count(rect.node.self)} self</span>}
-      </div>
-    </div>
-  )
-}
-
-// An icicle chart (root on top, callees below) over collapsed stacks. Click
-// a frame to zoom into it; the breadcrumb walks back out.
-export function Flamegraph({
-  collapsed,
-  className,
-}: {
-  collapsed: string
-  className?: string
-}) {
-  const tree = useMemo(() => parseCollapsed(collapsed), [collapsed])
-  const [query, setQuery] = useState("")
-  const [mode, setMode] = useState<"self" | "total">("self")
-  // Zoom path and hover both point at nodes of one particular tree, so they
-  // are stored with it: a new profile makes the whole view stale at once,
-  // without an effect that resets them a render late.
-  const [state, setState] = useState<View>({ tree, zoom: [], hovered: null })
-  const view = state.tree === tree ? state : { tree, zoom: [], hovered: null }
-  const zoom = view.zoom
-
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [width, setWidth] = useState(0)
-
-  useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
-    setWidth(el.clientWidth)
-    const observer = new ResizeObserver(([entry]) =>
-      setWidth(entry.contentRect.width),
-    )
-    observer.observe(el)
-    return () => observer.disconnect()
-  }, [])
-
-  const root = zoom[zoom.length - 1] ?? tree
-  const rects = useMemo(() => layout(root, width), [root, width])
-  const matches = useMemo(() => search(tree, query), [tree, query])
-  const hottest = useMemo(
-    () =>
-      mode === "self"
-        ? hottestSelf(root, HOTTEST)
-        : hottestTotal(root, HOTTEST),
-    [root, mode],
-  )
-
-  const depth = rects.reduce((max, r) => Math.max(max, r.depth), 0)
-  const searching = matches.size > 0
-
-  if (tree.value === 0) {
-    return (
-      <p className="text-muted-foreground py-6 text-center text-sm">
-        This profile recorded no samples.
-      </p>
-    )
-  }
-
-  return (
-    <div className={cn("space-y-3", className)}>
-      <div className="flex flex-wrap items-center gap-2">
-        <Input
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          placeholder="Search frames"
-          className="h-8 max-w-56 font-mono text-xs"
-          aria-label="Search frames"
-        />
-        {query !== "" && (
-          <span className="text-muted-foreground font-mono text-[11px]">
-            {matches.size} match{matches.size === 1 ? "" : "es"}
-          </span>
-        )}
-        <div className="ml-auto flex flex-wrap items-center gap-1 font-mono text-[11px]">
-          {[tree, ...zoom].map((node, i) => (
-            <span key={node.id} className="flex items-center gap-1">
-              {i > 0 && <span className="text-muted-foreground">/</span>}
-              <button
-                type="button"
-                onClick={() => setState({ ...view, zoom: zoom.slice(0, i) })}
-                disabled={i === zoom.length}
-                className={cn(
-                  "max-w-40 truncate",
-                  i === zoom.length
-                    ? "text-foreground font-semibold"
-                    : "text-muted-foreground hover:underline",
-                )}
-              >
-                {node.name}
-              </button>
-            </span>
-          ))}
-        </div>
-      </div>
-
-      <div
-        ref={containerRef}
-        className="bg-muted/20 relative overflow-hidden rounded-lg border"
-        onMouseLeave={() => setState({ ...view, hovered: null })}
-      >
-        <svg
-          width={width}
-          height={(depth + 1) * ROW}
-          role="img"
-          aria-label={`Flamegraph of ${tree.value} samples`}
-        >
-          {rects.map((r) => {
-            const label = truncate(r.node.name, r.width)
-            return (
-              <g
-                key={r.id}
-                onClick={() =>
-                  setState({
-                    ...view,
-                    zoom: [...zoom, ...pathTo(root, r.node)],
-                  })
-                }
-                onMouseMove={(e) => {
-                  const box = containerRef.current?.getBoundingClientRect()
-                  setState({
-                    ...view,
-                    hovered: {
-                      rect: r,
-                      x: e.clientX - (box?.left ?? 0),
-                      y: e.clientY - (box?.top ?? 0),
-                    },
-                  })
-                }}
-                className="cursor-pointer"
-              >
-                <rect
-                  x={r.x}
-                  y={r.depth * ROW}
-                  width={Math.max(0, r.width - 1)}
-                  height={ROW - 1}
-                  rx={2}
-                  fill={frameColor(r.node.name)}
-                  opacity={
-                    searching
-                      ? matches.has(r.id)
-                        ? 1
-                        : 0.18
-                      : view.hovered?.rect.id === r.id
-                        ? 1
-                        : 0.88
-                  }
-                  stroke={matches.has(r.id) ? "currentColor" : "none"}
-                  strokeWidth={1}
-                />
-                {label !== "" && (
-                  <text
-                    x={r.x + 4}
-                    y={r.depth * ROW + ROW / 2}
-                    dominantBaseline="central"
-                    className="pointer-events-none fill-black/85 font-mono text-[10px]"
-                  >
-                    {label}
-                  </text>
-                )}
-              </g>
-            )
-          })}
-        </svg>
-        {view.hovered && (
-          <Tooltip
-            rect={view.hovered.rect}
-            total={tree.value}
-            x={view.hovered.x}
-            y={view.hovered.y}
-          />
-        )}
-      </div>
-
-      <div className="flex flex-wrap items-center justify-between gap-2">
-        <h3 className="label-caps">Hottest frames</h3>
-        <Segmented>
-          <SegmentedItem
-            active={mode === "self"}
-            onClick={() => setMode("self")}
-          >
-            Self
-          </SegmentedItem>
-          <SegmentedItem
-            active={mode === "total"}
-            onClick={() => setMode("total")}
-          >
-            Total
-          </SegmentedItem>
-        </Segmented>
-      </div>
-      <DataTable
-        rows={hottest}
-        rowKey={(f) => f.name}
-        empty="No frames in this view."
-        columns={[
-          {
-            key: "name",
-            header: "Frame",
-            className: "max-w-0",
-            cell: (f) => (
-              <span className="block truncate font-mono text-xs" title={f.name}>
-                {f.name}
-              </span>
-            ),
-          },
-          {
-            key: "self",
-            header: "Self",
-            align: "right",
-            cell: (f) => (
-              <span className={mode === "self" ? "font-semibold" : ""}>
-                {count(f.self)}
-              </span>
-            ),
-          },
-          {
-            key: "total",
-            header: "Total",
-            align: "right",
-            cell: (f) => (
-              <span className={mode === "total" ? "font-semibold" : ""}>
-                {count(f.total)}
-              </span>
-            ),
-          },
-        ]}
-      />
-    </div>
-  )
-}
-
-// The chain of nodes from the current root down to `target`, so clicking a
-// frame deep in the graph pushes every step onto the breadcrumb.
-function pathTo(from: FlameNode, target: FlameNode): FlameNode[] {
-  if (from === target) return []
-  for (const child of from.children) {
-    const rest = pathTo(child, target)
-    if (rest.length > 0 || child === target) return [child, ...rest]
-  }
-  return []
-}