railwatch 0.9.4 → 1.0.0

data/app/frontend/entrypoints/application.css

@@ -1,244 +0,0 @@
-@import "tailwindcss";
-
-/* Commit Mono for numbers, identifiers, and labels (SIL OFL). Roboto for UI
-   text, matching the rebulk.com brand system (Apache 2.0); four weights,
-   subset to the Latin range (about 18 KB each) and preloaded from the layout
-   head so they arrive with the HTML rather than after first layout. */
-@font-face {
-  font-family: "CommitMono";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("../fonts/CommitMono-Regular.woff2") format("woff2");
-}
-@font-face {
-  font-family: "CommitMono";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("../fonts/CommitMono-Bold.woff2") format("woff2");
-}
-@font-face {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("../fonts/Roboto-Regular.woff2") format("woff2");
-}
-@font-face {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("../fonts/Roboto-Medium.woff2") format("woff2");
-}
-@font-face {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("../fonts/Roboto-Bold.woff2") format("woff2");
-}
-@font-face {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("../fonts/Roboto-Black.woff2") format("woff2");
-}
-/* While Roboto is still in flight the page renders in this face instead: a
-   local sans with its metrics overridden to Roboto's (size-adjust from the
-   average glyph width, ascent and descent from Roboto's hhea table), so line
-   breaks and box heights are the same before and after the swap and nothing
-   moves when the real font lands. */
-@font-face {
-  font-family: "Roboto Fallback";
-  src:
-    local("Liberation Sans"), local("Arial"), local("Helvetica Neue"),
-    local("Helvetica");
-  size-adjust: 96.1%;
-  ascent-override: 96.5%;
-  descent-override: 25.4%;
-  line-gap-override: 0%;
-}
-
-@import "tw-animate-css";
-@plugin "@tailwindcss/typography";
-@plugin "@tailwindcss/forms";
-
-@custom-variant dark (&:is(.dark *));
-
-/* Railwatch palette: the rebulk.com brand system. Navy ink, gold as the sole
-   accent, Roboto for UI text. Light: soft blue-grey page, white panels, navy
-   text. Dark: the navy stack from the marketing site (#020618 page, #0F1729
-   panel, #1E2A45 edge) with gold as primary. Status vocabulary is shared by
-   badges, charts and signals: grey = fine, amber = warning/4xx, rose =
-   error/5xx, green = live. */
-:root {
-  --background: #f5f7fb;
-  --foreground: #0f1729;
-  --card: #ffffff;
-  --card-foreground: #0f1729;
-  --popover: #ffffff;
-  --popover-foreground: #0f1729;
-  --primary: #0f1729;
-  --primary-foreground: #ffffff;
-  --secondary: #e9edf5;
-  --secondary-foreground: #0f1729;
-  --muted: #eef1f7;
-  --muted-foreground: #5e708f;
-  --accent: #eef1f7;
-  --accent-foreground: #0f1729;
-  --destructive: oklch(0.645 0.246 16.439);
-  --destructive-foreground: oklch(0.645 0.246 16.439);
-  --border: #dbe1ec;
-  --input: #dbe1ec;
-  --ring: rgb(253 193 26 / 0.6);
-  --ok: #c9d2e3;
-  --warning: oklch(0.769 0.188 70.08);
-  --danger: oklch(0.645 0.246 16.439);
-  --live: oklch(0.696 0.17 162.48);
-  --chart-1: var(--ok);
-  --chart-2: #0f1729;
-  --chart-3: var(--warning);
-  --chart-4: var(--warning);
-  --chart-5: var(--danger);
-  --radius: 0.5rem;
-  --sidebar: #ffffff;
-  --sidebar-foreground: #5e708f;
-  --sidebar-primary: #0f1729;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #eef1f7;
-  --sidebar-accent-foreground: #0f1729;
-  --sidebar-border: #dbe1ec;
-  --sidebar-ring: rgb(253 193 26 / 0.6);
-}
-
-.dark {
-  --background: #020618;
-  --foreground: #e6ebf4;
-  --card: #0f1729;
-  --card-foreground: #e6ebf4;
-  --popover: #0f1729;
-  --popover-foreground: #e6ebf4;
-  --primary: #fdc11a;
-  --primary-foreground: #020618;
-  --secondary: #1e2a45;
-  --secondary-foreground: #e6ebf4;
-  --muted: #0a1122;
-  --muted-foreground: #93a6c4;
-  --accent: #1e2a45;
-  --accent-foreground: #ffffff;
-  --destructive-foreground: oklch(0.72 0.2 16.439);
-  --border: #1e2a45;
-  --input: #26355a;
-  --ring: rgb(253 193 26 / 0.5);
-  --ok: #26355a;
-  --warning: oklch(0.666 0.179 58.318);
-  --chart-2: #fdc11a;
-  --sidebar: #0a1122;
-  --sidebar-foreground: #93a6c4;
-  --sidebar-primary: #fdc11a;
-  --sidebar-primary-foreground: #020618;
-  --sidebar-accent: #1e2a45;
-  --sidebar-accent-foreground: #ffffff;
-  --sidebar-border: #1e2a45;
-  --sidebar-ring: rgb(253 193 26 / 0.5);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-ok: var(--ok);
-  --color-warning: var(--warning);
-  --color-danger: var(--danger);
-  --color-live: var(--live);
-  --font-sans:
-    "Roboto", "Roboto Fallback", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "CommitMono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  html {
-    color-scheme: light dark;
-  }
-  body {
-    @apply bg-background text-foreground antialiased;
-    font-feature-settings: "cv11", "ss01", "tnum";
-    letter-spacing: -0.02em;
-  }
-  /* Small uppercase mono label used on stat tiles, table heads, and badges. */
-  .label-caps {
-    @apply text-muted-foreground font-mono text-[11px] tracking-wide uppercase;
-  }
-  /* Full-text search hit inside a log message snippet. */
-  .fts-mark {
-    background-color: color-mix(in oklch, var(--warning) 30%, transparent);
-    @apply rounded-[2px] px-0.5 text-inherit;
-  }
-  /* Faint dot grid backdrop behind the app canvas. */
-  .dotted-canvas {
-    background-image: radial-gradient(
-      color-mix(in oklch, var(--foreground) 7%, transparent) 1px,
-      transparent 1px
-    );
-    background-size: 22px 22px;
-  }
-}

data/app/frontend/entrypoints/inertia.tsx

@@ -1,92 +0,0 @@
-import type { ResolvedComponent } from "@inertiajs/react"
-import { createInertiaApp } from "@inertiajs/react"
-import { StrictMode } from "react"
-import { createRoot } from "react-dom/client"
-
-import { initializeTheme } from "@/hooks/use-appearance"
-import PersistentLayout from "@/layouts/persistent-layout"
-import { applyMount } from "@/lib/mount"
-import { railwatchRootOptions, startRailwatch } from "@/lib/railwatch"
-
-// When served under a mount point (the embedded engine, or a Railwatch server
-// mounted inside another app), every route helper must carry it. The layout
-// emits it; the hosted platform does not, so this is a no-op there.
-applyMount()
-
-const appName = import.meta.env.VITE_APP_NAME ?? "Railwatch"
-
-void createInertiaApp({
-  // Set default page title
-  // see https://inertia-rails.dev/guide/title-and-meta
-  //
-  title: (title) => (title ? `${title} - ${appName}` : appName),
-
-  resolve: async (name) => {
-    const pages = import.meta.glob<{ default: ResolvedComponent }>([
-      "../pages/**/*.tsx",
-      "!../pages/**/*.test.tsx",
-    ])
-    const loadPage = pages[`../pages/${name}.tsx`]
-    if (!loadPage) {
-      throw new Error(`Missing Inertia page component: '${name}.tsx'`)
-    }
-    const page = await loadPage()
-
-    // To use a default layout, import the Layout component
-    // and use the following line.
-    // see https://inertia-rails.dev/guide/pages#default-layouts
-    //
-    page.default.layout ??= [PersistentLayout]
-
-    return page
-  },
-
-  setup({ el, App, props }) {
-    // Uncomment the following to enable SSR hydration:
-    // if (el.hasChildNodes()) {
-    //   hydrateRoot(el, <App {...props} />)
-    //   return
-    // }
-    createRoot(el, railwatchRootOptions()).render(
-      <StrictMode>
-        <App {...props} />
-      </StrictMode>,
-    )
-  },
-
-  defaults: {
-    form: {
-      forceIndicesArrayFormatInFormData: false,
-      withAllErrors: true,
-    },
-    future: {
-      useScriptElementForInitialPage: true,
-      useDataInertiaHeadAttribute: true,
-      useDialogForErrorModal: true,
-      preserveEqualProps: true,
-    },
-  },
-
-  progress: {
-    color: "#4B5563",
-  },
-}).catch((error) => {
-  // This ensures this entrypoint is only loaded on Inertia pages
-  // by checking for the presence of the root element (#app by default).
-  // Feel free to remove this `catch` if you don't need it.
-  if (document.getElementById("app")) {
-    throw error
-  } else {
-    console.error(
-      "Missing root element.\n\n" +
-        "If you see this error, it probably means you loaded Inertia.js on non-Inertia pages.\n" +
-        'Consider moving <%= vite_typescript_tag "inertia" %> to the Inertia-specific layout instead.',
-    )
-  }
-})
-
-// This will set light / dark mode on load...
-initializeTheme()
-
-// Report Inertia visit timings to Railwatch (the platform monitors itself).
-startRailwatch()

data/app/frontend/hooks/use-appearance.tsx

@@ -1,67 +0,0 @@
-import { useCallback, useEffect, useState } from "react"
-
-export type Appearance = "light" | "dark" | "system"
-
-const prefersDark = () => {
-  if (typeof window === "undefined") {
-    return false
-  }
-  return window.matchMedia("(prefers-color-scheme: dark)").matches
-}
-
-const applyTheme = (appearance: Appearance) => {
-  const isDark =
-    appearance === "dark" || (appearance === "system" && prefersDark())
-
-  document.documentElement.classList.toggle("dark", isDark)
-  document.documentElement.style.colorScheme = isDark ? "dark" : "light"
-}
-
-const mediaQuery = () => {
-  if (typeof window === "undefined") {
-    return null
-  }
-
-  return window.matchMedia("(prefers-color-scheme: dark)")
-}
-
-const handleSystemThemeChange = () => {
-  const currentAppearance = localStorage.getItem("appearance") as Appearance
-  applyTheme(currentAppearance ?? "system")
-}
-
-export function initializeTheme() {
-  const savedAppearance =
-    (localStorage.getItem("appearance") as Appearance) || "system"
-
-  applyTheme(savedAppearance)
-
-  mediaQuery()?.addEventListener("change", handleSystemThemeChange)
-}
-
-export function useAppearance() {
-  const [appearance, setAppearance] = useState<Appearance>(() => {
-    if (typeof window === "undefined") return "system"
-    const saved = localStorage.getItem("appearance") as Appearance | null
-    return saved ?? "system"
-  })
-
-  const updateAppearance = useCallback((mode: Appearance) => {
-    setAppearance(mode)
-    if (mode === "system") {
-      localStorage.removeItem("appearance")
-    } else {
-      localStorage.setItem("appearance", mode)
-    }
-    applyTheme(mode)
-  }, [])
-
-  useEffect(() => {
-    applyTheme(appearance)
-
-    return () =>
-      mediaQuery()?.removeEventListener("change", handleSystemThemeChange)
-  }, [appearance])
-
-  return { appearance, updateAppearance } as const
-}

data/app/frontend/hooks/use-clipboard.ts

@@ -1,32 +0,0 @@
-// Credit: https://usehooks-ts.com/
-import { useCallback, useState } from "react"
-
-type CopiedValue = string | null
-
-type CopyFn = (text: string) => Promise<boolean>
-
-export function useClipboard(): [CopiedValue, CopyFn] {
-  const [copiedText, setCopiedText] = useState<CopiedValue>(null)
-
-  const copy: CopyFn = useCallback(async (text) => {
-    if (!navigator?.clipboard) {
-      console.warn("Clipboard not supported")
-
-      return false
-    }
-
-    try {
-      await navigator.clipboard.writeText(text)
-      setCopiedText(text)
-
-      return true
-    } catch (error) {
-      console.warn("Copy failed", error)
-      setCopiedText(null)
-
-      return false
-    }
-  }, [])
-
-  return [copiedText, copy]
-}

data/app/frontend/hooks/use-flash.tsx

@@ -1,23 +0,0 @@
-import { usePage } from "@inertiajs/react"
-import { useEffect } from "react"
-
-import { signalToast } from "@/components/railwatch/signal-toast"
-import type { FlashData } from "@/types"
-
-// Rails flash to signal aspects: alert is stop, warning is caution, notice
-// is clear.
-function showFlash(flash: FlashData) {
-  if (flash.alert) signalToast("stop", flash.alert)
-  if (flash.warning) signalToast("caution", flash.warning)
-  if (flash.notice) signalToast("clear", flash.notice)
-}
-
-export function useFlash() {
-  const { flash } = usePage()
-
-  useEffect(() => {
-    // setTimeout + cleanup prevents double-firing in React StrictMode
-    const timeout = setTimeout(() => showFlash(flash), 0)
-    return () => clearTimeout(timeout)
-  }, [flash])
-}

data/app/frontend/hooks/use-hotkeys.ts

@@ -1,63 +0,0 @@
-import { useEffect, useRef } from "react"
-
-type HotkeyMap = Record<string, () => void>
-
-const CHORD_TIMEOUT_MS = 800
-
-// Tiny keyboard shortcut hook supporting single keys ("?") and two-key
-// chords ("g d") without pulling in a dependency. Ignores keystrokes while
-// focus is in a form field, and while a modifier key is held.
-export function useHotkeys(map: HotkeyMap) {
-  const mapRef = useRef(map)
-  useEffect(() => {
-    mapRef.current = map
-  })
-
-  const pending = useRef<string | null>(null)
-  const timer = useRef<number | undefined>(undefined)
-
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      const target = event.target as HTMLElement
-      if (
-        target.tagName === "INPUT" ||
-        target.tagName === "TEXTAREA" ||
-        target.tagName === "SELECT" ||
-        target.isContentEditable
-      ) {
-        return
-      }
-      if (event.metaKey || event.ctrlKey || event.altKey) return
-
-      if (pending.current) {
-        const combo = `${pending.current} ${event.key}`
-        window.clearTimeout(timer.current)
-        pending.current = null
-        if (mapRef.current[combo]) {
-          event.preventDefault()
-          mapRef.current[combo]()
-          return
-        }
-      }
-
-      if (mapRef.current[event.key]) {
-        event.preventDefault()
-        mapRef.current[event.key]()
-        return
-      }
-
-      if (event.key === "g") {
-        pending.current = "g"
-        timer.current = window.setTimeout(() => {
-          pending.current = null
-        }, CHORD_TIMEOUT_MS)
-      }
-    }
-
-    document.addEventListener("keydown", onKeyDown)
-    return () => {
-      document.removeEventListener("keydown", onKeyDown)
-      window.clearTimeout(timer.current)
-    }
-  }, [])
-}

data/app/frontend/hooks/use-initials.tsx

@@ -1,15 +0,0 @@
-import { useCallback } from "react"
-
-export function useInitials() {
-  return useCallback((fullName: string): string => {
-    const names = fullName.trim().split(" ")
-
-    if (names.length === 0) return ""
-    if (names.length === 1) return names[0].charAt(0).toUpperCase()
-
-    const firstInitial = names[0].charAt(0)
-    const lastInitial = names[names.length - 1].charAt(0)
-
-    return `${firstInitial}${lastInitial}`.toUpperCase()
-  }, [])
-}