railwatch 0.6.0 → 0.7.0

data/app/frontend/components/breadcrumbs.tsx

@@ -0,0 +1,46 @@
+import { Link } from "@inertiajs/react"
+import { Fragment } from "react"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+import type { BreadcrumbItem as BreadcrumbItemType } from "@/types"
+
+export function Breadcrumbs({
+  breadcrumbs,
+}: {
+  breadcrumbs: BreadcrumbItemType[]
+}) {
+  return (
+    <>
+      {breadcrumbs.length > 0 && (
+        <Breadcrumb>
+          <BreadcrumbList>
+            {breadcrumbs.map((item, index) => {
+              const isLast = index === breadcrumbs.length - 1
+              return (
+                <Fragment key={index}>
+                  <BreadcrumbItem>
+                    {isLast ? (
+                      <BreadcrumbPage>{item.title}</BreadcrumbPage>
+                    ) : (
+                      <BreadcrumbLink asChild>
+                        <Link href={item.href}>{item.title}</Link>
+                      </BreadcrumbLink>
+                    )}
+                  </BreadcrumbItem>
+                  {!isLast && <BreadcrumbSeparator />}
+                </Fragment>
+              )
+            })}
+          </BreadcrumbList>
+        </Breadcrumb>
+      )}
+    </>
+  )
+}

data/app/frontend/components/icon.tsx

@@ -0,0 +1,16 @@
+import type { LucideProps } from "lucide-react"
+import type { ComponentType } from "react"
+
+import { cn } from "@/lib/utils"
+
+type IconProps = {
+  iconNode: ComponentType<LucideProps>
+} & Omit<LucideProps, "ref">
+
+export function Icon({
+  iconNode: IconComponent,
+  className,
+  ...props
+}: IconProps) {
+  return <IconComponent className={cn("h-4 w-4", className)} {...props} />
+}

data/app/frontend/components/input-error.tsx

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "react"
+
+import { cn } from "@/lib/utils"
+
+export default function InputError({
+  messages,
+  className = "",
+  ...props
+}: HTMLAttributes<HTMLParagraphElement> & { messages?: string[] }) {
+  return messages ? (
+    <p
+      {...props}
+      className={cn("text-sm text-red-600 dark:text-red-400", className)}
+    >
+      {messages.join(", ")}
+    </p>
+  ) : null
+}

data/app/frontend/components/nav-footer.tsx

@@ -0,0 +1,46 @@
+import type { ComponentPropsWithoutRef } from "react"
+
+import { Icon } from "@/components/icon"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import type { NavItem } from "@/types"
+
+export function NavFooter({
+  items,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof SidebarGroup> & {
+  items: NavItem[]
+}) {
+  return (
+    <SidebarGroup
+      {...props}
+      className={`group-data-[collapsible=icon]:p-0 ${className ?? ""}`}
+    >
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton
+                asChild
+                className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
+              >
+                <a href={item.href} target="_blank" rel="noopener noreferrer">
+                  {item.icon && (
+                    <Icon iconNode={item.icon} className="h-5 w-5" />
+                  )}
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}

data/app/frontend/components/nav-main.tsx

@@ -0,0 +1,41 @@
+import { Link, usePage } from "@inertiajs/react"
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import type { NavItem } from "@/types"
+
+export function NavMain({
+  items = [],
+  label = "Platform",
+}: {
+  items: NavItem[]
+  label?: string
+}) {
+  const page = usePage()
+  return (
+    <SidebarGroup className="p-0">
+      {label && <SidebarGroupLabel>{label}</SidebarGroupLabel>}
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.title}>
+            <SidebarMenuButton
+              asChild
+              isActive={page.url.startsWith(item.href)}
+              tooltip={{ children: item.title }}
+            >
+              <Link href={item.href} prefetch>
+                {item.icon && <item.icon />}
+                <span>{item.title}</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}

data/app/frontend/components/nav-user.tsx

@@ -0,0 +1,50 @@
+import { usePage } from "@inertiajs/react"
+import { ChevronsUpDown } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import { UserInfo } from "@/components/user-info"
+import { UserMenuContent } from "@/components/user-menu-content"
+import { useIsMobile } from "@/hooks/use-mobile"
+
+export function NavUser() {
+  const { auth } = usePage().props
+  const { state } = useSidebar()
+  const isMobile = useIsMobile()
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="default"
+              className="data-[state=open]:bg-sidebar-accent group gap-2"
+            >
+              <UserInfo user={auth.user} />
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="end"
+            side={
+              isMobile ? "bottom" : state === "collapsed" ? "left" : "bottom"
+            }
+          >
+            <UserMenuContent auth={auth} />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

data/app/frontend/components/railwatch/chart-hover.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext, useMemo, useState } from "react"
+import type { ReactNode } from "react"
+
+interface ChartHoverContextValue {
+  hoveredKey: string | null
+  setHoveredKey: (key: string | null) => void
+}
+
+const noop = () => undefined
+const fallback: ChartHoverContextValue = {
+  hoveredKey: null,
+  setHoveredKey: noop,
+}
+
+const ChartHoverContext = createContext<ChartHoverContextValue>(fallback)
+
+// Links a chart to the table below it: hovering a chart point (bucket time)
+// or a table row (its group_hash) sets one shared `hoveredKey`, so
+// `SeriesChart`/`Sparkline` can highlight the matching point and `DataTable`
+// can style the matching row. Using the context outside a provider is safe —
+// it falls back to a no-op so call sites don't need to check.
+export function ChartHoverProvider({ children }: { children: ReactNode }) {
+  const [hoveredKey, setHoveredKey] = useState<string | null>(null)
+  const value = useMemo(() => ({ hoveredKey, setHoveredKey }), [hoveredKey])
+  return (
+    <ChartHoverContext.Provider value={value}>
+      {children}
+    </ChartHoverContext.Provider>
+  )
+}
+
+export function useChartHover() {
+  return useContext(ChartHoverContext)
+}

data/app/frontend/components/railwatch/chart-panel.tsx

@@ -0,0 +1,170 @@
+import type { ReactNode } from "react"
+
+import {
+  LatencyChart,
+  ThroughputChart,
+} from "@/components/railwatch/series-chart"
+import { count, ms } from "@/lib/format"
+import { cn } from "@/lib/utils"
+import type { DeployMarker, Percentile, SeriesPoint } from "@/types"
+
+// Nightwatch's chart card: a mono label with the headline number at the
+// left, a colour-keyed legend with per-series totals at the right, the
+// chart below, and the bucket range under it (drawn by the chart itself).
+export function ChartPanel({
+  label,
+  value,
+  legend,
+  children,
+  className,
+}: {
+  label: string
+  value: ReactNode
+  legend?: { key: string; label: string; value: ReactNode; color: string }[]
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn("bg-card rounded-lg border p-4", className)}>
+      <div className="mb-3 flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <div className="label-caps">{label}</div>
+          <div className="mt-0.5 text-xl font-semibold tracking-tight tabular-nums">
+            {value}
+          </div>
+        </div>
+        {legend && (
+          <div className="flex shrink-0 gap-4">
+            {legend.map((l) => (
+              <div key={l.key} className="text-right">
+                <div className="label-caps flex items-center justify-end gap-1.5">
+                  <span
+                    className="inline-block h-2.5 w-1 rounded-sm"
+                    style={{ background: l.color }}
+                  />
+                  {l.label}
+                </div>
+                <div className="mt-0.5 font-mono text-sm tabular-nums">
+                  {l.value}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+function sum(data: SeriesPoint[], key: "count" | "errors" | "client_errors") {
+  return data.reduce((n, d) => n + d[key], 0)
+}
+
+// What the three stacked series mean for each record type. Rollups store
+// them as count / client_errors / errors; the words differ per page.
+export const VOLUME_LEGENDS = {
+  request: { ok: "1/2/3xx", warn: "4xx", error: "5xx" },
+  job: { ok: "processed", warn: "released", error: "failed" },
+  outcome: { ok: "ok", warn: null, error: "failed" },
+  exception: { ok: "handled", warn: null, error: "unhandled" },
+  cache: { ok: "hit", warn: "miss", error: "write" },
+} as const
+
+export type VolumeLegend = keyof typeof VOLUME_LEGENDS
+
+// Volume panel: total as the headline, and a colour-keyed legend naming the
+// ok / warning / error slices in the record type's own words.
+export function VolumePanel({
+  data,
+  deploys,
+  label = "Requests",
+  seriesLabel,
+  legend = "request",
+  className,
+}: {
+  data: SeriesPoint[]
+  deploys?: DeployMarker[]
+  label?: string
+  seriesLabel?: string
+  legend?: VolumeLegend
+  className?: string
+}) {
+  const total = sum(data, "count")
+  const errors = sum(data, "errors")
+  const client = sum(data, "client_errors")
+  const words = VOLUME_LEGENDS[legend]
+  const items = [
+    {
+      key: "ok",
+      label: words.ok,
+      value: count(total - errors - client),
+      color: "var(--ok)",
+    },
+    words.warn && {
+      key: "warn",
+      label: words.warn,
+      value: count(client),
+      color: "var(--warning)",
+    },
+    {
+      key: "error",
+      label: words.error,
+      value: count(errors),
+      color: "var(--danger)",
+    },
+  ].filter((i): i is NonNullable<typeof i> => Boolean(i))
+  return (
+    <ChartPanel
+      label={label}
+      value={count(total)}
+      className={className}
+      legend={items}
+    >
+      <ThroughputChart data={data} deploys={deploys} label={seriesLabel} />
+    </ChartPanel>
+  )
+}
+
+// Duration panel: min — max range as the headline, avg and pNN legend.
+export function DurationPanel({
+  data,
+  deploys,
+  percentile = "p95",
+  label = "Duration",
+  className,
+}: {
+  data: SeriesPoint[]
+  deploys?: DeployMarker[]
+  percentile?: Percentile
+  label?: string
+  className?: string
+}) {
+  const withData = data.filter((d) => d.count > 0)
+  const avgs = withData.flatMap((d) => (d.avg == null ? [] : [d.avg]))
+  const pcts = withData.flatMap((d) =>
+    d[percentile] == null ? [] : [d[percentile]],
+  )
+  const avg = avgs.length ? avgs.reduce((a, b) => a + b, 0) / avgs.length : 0
+  const pct = pcts.length ? Math.max(...pcts) : 0
+  const lo = avgs.length ? Math.min(...avgs) : 0
+  const hi = pcts.length ? Math.max(...pcts) : 0
+  return (
+    <ChartPanel
+      label={label}
+      value={withData.length ? `${ms(lo)} — ${ms(hi)}` : "—"}
+      className={className}
+      legend={[
+        { key: "avg", label: "avg", value: ms(avg), color: "var(--warning)" },
+        {
+          key: percentile,
+          label: percentile,
+          value: ms(pct),
+          color: "var(--primary)",
+        },
+      ]}
+    >
+      <LatencyChart data={data} deploys={deploys} percentile={percentile} />
+    </ChartPanel>
+  )
+}

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

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils"
+
+export function Sql({
+  children,
+  className,
+}: {
+  children: string
+  className?: string
+}) {
+  return (
+    <code
+      className={cn("block max-w-full truncate font-mono text-xs", className)}
+      title={children}
+    >
+      {children}
+    </code>
+  )
+}
+
+export function Mono({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return <span className={cn("font-mono text-xs", className)}>{children}</span>
+}

data/app/frontend/components/railwatch/command-palette.tsx

@@ -0,0 +1,132 @@
+import { router, usePage } from "@inertiajs/react"
+import { AlertOctagon, LayoutGrid, Plug, SearchIcon, Users } from "lucide-react"
+import { useState } from "react"
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command"
+import { envPages } from "@/lib/env-pages"
+import {
+  applicationEnvironmentOverviewPath,
+  dashboardPath,
+  issuesPath,
+  settingsIntegrationsPath,
+  settingsMembersPath,
+} from "@/routes"
+import type { NavItem, SharedProps } from "@/types"
+
+const staticNav = (embedded: boolean): NavItem[] => [
+  ...(embedded
+    ? []
+    : [{ title: "Dashboard", href: dashboardPath(), icon: LayoutGrid }]),
+  { title: "Issues", href: issuesPath(), icon: AlertOctagon },
+  ...(embedded
+    ? []
+    : [
+        { title: "Integrations", href: settingsIntegrationsPath(), icon: Plug },
+        { title: "Members", href: settingsMembersPath(), icon: Users },
+      ]),
+]
+
+export function CommandPalette({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const [query, setQuery] = useState("")
+  const {
+    applications,
+    environment,
+    embedded,
+    window: currentWindow,
+  } = usePage<SharedProps>().props
+
+  const go = (href: string) => {
+    onOpenChange(false)
+    router.visit(href)
+  }
+
+  const envItems = environment
+    ? envPages(
+        environment.application_id,
+        environment.id,
+        currentWindow ?? "24h",
+      )
+    : []
+
+  return (
+    <CommandDialog open={open} onOpenChange={onOpenChange}>
+      <CommandInput
+        placeholder="Search pages, applications, issues…"
+        value={query}
+        onValueChange={setQuery}
+      />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Navigation">
+          {staticNav(!!embedded).map((item) => (
+            <CommandItem key={item.title} onSelect={() => go(item.href)}>
+              {item.icon && <item.icon />}
+              <span>{item.title}</span>
+            </CommandItem>
+          ))}
+        </CommandGroup>
+        {envItems.length > 0 && (
+          <CommandGroup
+            heading={`${environment!.application_name} · ${environment!.name}`}
+          >
+            {envItems.map((item) => (
+              <CommandItem key={item.title} onSelect={() => go(item.href)}>
+                {item.icon && <item.icon />}
+                <span>{item.title}</span>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        )}
+        {!embedded && (
+          <CommandGroup heading="Applications">
+            {applications.flatMap((app) =>
+              app.environments.map((env) => (
+                <CommandItem
+                  key={`${app.id}-${env.id}`}
+                  value={`${app.name} ${env.name}`}
+                  onSelect={() =>
+                    go(applicationEnvironmentOverviewPath(app.id, env.id))
+                  }
+                >
+                  <span>
+                    {app.name} · {env.name}
+                  </span>
+                </CommandItem>
+              )),
+            )}
+          </CommandGroup>
+        )}
+        {query.trim() && (
+          <>
+            <CommandSeparator />
+            <CommandGroup heading="Search">
+              <CommandItem
+                value={query}
+                onSelect={() =>
+                  go(`${issuesPath()}?q=${encodeURIComponent(query)}`)
+                }
+              >
+                <SearchIcon />
+                <span>Search issues for &ldquo;{query}&rdquo;</span>
+              </CommandItem>
+            </CommandGroup>
+          </>
+        )}
+      </CommandList>
+    </CommandDialog>
+  )
+}

data/app/frontend/components/railwatch/copy-block.tsx

@@ -0,0 +1,52 @@
+import { CheckIcon, CopyIcon } from "lucide-react"
+import { useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { useClipboard } from "@/hooks/use-clipboard"
+import { cn } from "@/lib/utils"
+
+const COPIED_RESET_MS = 1500
+
+// A code block with a copy button in its corner. Everything Railwatch asks a
+// developer to paste somewhere else — a Gemfile line, a token, an MCP client
+// config — goes through this, so "copy" behaves the same everywhere.
+export function CopyBlock({
+  code,
+  className,
+}: {
+  code: string
+  className?: string
+}) {
+  const [, copy] = useClipboard()
+  const [justCopied, setJustCopied] = useState(false)
+
+  const handleCopy = () => {
+    void copy(code).then((ok) => {
+      if (!ok) return
+      setJustCopied(true)
+      window.setTimeout(() => setJustCopied(false), COPIED_RESET_MS)
+    })
+  }
+
+  return (
+    <div className={cn("relative", className)}>
+      <pre className="bg-muted overflow-x-auto rounded p-3 pr-10 font-mono text-xs">
+        {code}
+      </pre>
+      <Button
+        type="button"
+        aria-label={justCopied ? "Copied code" : "Copy code"}
+        variant="ghost"
+        size="icon"
+        className="absolute top-1.5 right-1.5 size-6"
+        onClick={handleCopy}
+      >
+        {justCopied ? (
+          <CheckIcon className="size-3.5 text-emerald-500" />
+        ) : (
+          <CopyIcon className="size-3.5 opacity-60" />
+        )}
+      </Button>
+    </div>
+  )
+}

data/app/frontend/components/railwatch/copy-id.tsx

@@ -0,0 +1,49 @@
+import { CheckIcon, CopyIcon } from "lucide-react"
+import { useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { useClipboard } from "@/hooks/use-clipboard"
+import { cn } from "@/lib/utils"
+
+const COPIED_RESET_MS = 1500
+
+export function CopyId({
+  value,
+  label,
+  className,
+}: {
+  value: string
+  label?: string
+  className?: string
+}) {
+  const [, copy] = useClipboard()
+  const [justCopied, setJustCopied] = useState(false)
+
+  const handleCopy = () => {
+    void copy(value).then((ok) => {
+      if (!ok) return
+      setJustCopied(true)
+      window.setTimeout(() => setJustCopied(false), COPIED_RESET_MS)
+    })
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      className={cn(
+        "h-auto gap-1.5 px-1.5 py-0.5 font-mono text-xs",
+        className,
+      )}
+      onClick={handleCopy}
+    >
+      {label ?? value}
+      {justCopied ? (
+        <CheckIcon className="size-3 text-emerald-500" />
+      ) : (
+        <CopyIcon className="size-3 opacity-60" />
+      )}
+    </Button>
+  )
+}