Add Machine Page

web-interface/package.json

@@ -20,6 +20,7 @@
     "@tanstack/react-router": "latest",
     "@tanstack/react-router-devtools": "latest",
     "@tanstack/router-plugin": "^1.132.0",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.545.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

web-interface/src/components/Buttons.tsx

@@ -14,8 +14,7 @@ const fontSizeStyles = {
   base: 'text-base',
   lg: 'text-lg',
   xl: 'text-xl',
-};
-
+}
 
 type ButtonVariant = keyof typeof variantStyles
 type ButtonFontSize = keyof typeof fontSizeStyles
@@ -34,7 +33,7 @@ export function Button({
   return (
     <button
       onClick={onClick}
-      className={`flex items-center gap-1.5 px-3 py-1 ${fontSizeStyles[fontSize]} rounded ${variantStyles[variant]}`}
+      className={`flex items-center gap-1.5 px-3 py-1 ${fontSizeStyles[fontSize]} rounded ${variantStyles[variant]} ${variant === 'disabled' ? 'cursor-not-allowed' : 'cursor-pointer'}`}
       disabled={variant === 'disabled'}
     >
       {children}

web-interface/src/components/Card.tsx

@@ -5,16 +5,18 @@ export function CardInfoField({
   label,
   value,
   link,
+  hash,
 }: {
   label: string
   value: string
   link?: string
+  hash?: string
 }) {
   return (
     <div>
       <div className="text-xs text-gray-500 font-medium">{label}</div>
       {link ? (
-        <Link to={link} className="text-sm text-accent underline">
+        <Link to={link} hash={hash} className="text-sm text-accent underline">
           {value}
         </Link>
       ) : (
@@ -24,16 +26,25 @@ export function CardInfoField({
   )
 }
 
+const headerStyles = {
+  default: '',
+  error: 'text-red-500',
+}
+
 export function CardHeader({
   header,
+  headerStyle,
   children,
 }: {
   header: string
+  headerStyle: keyof typeof headerStyles
   children: ReactNode
 }) {
   return (
     <div className="flex items-center justify-between mb-4">
-      <h2 className="text-lg font-bold">{header}</h2>
+      <h2 className={`text-lg font-bold ${headerStyles[headerStyle]}`}>
+        {header}
+      </h2>
       <div className="flex gap-2">
         {/* Actions */}
         {children}
@@ -42,6 +53,16 @@ export function CardHeader({
   )
 }
 
-export default function Card({ children }: { children: ReactNode }) {
-  return <div className="border border-gray-200 rounded-xl p-5">{children}</div>
+export default function Card({
+  children,
+  id,
+}: {
+  children: ReactNode
+  id?: string
+}) {
+  return (
+    <div id={id} className="border border-gray-200 rounded-xl p-5">
+      {children}
+    </div>
+  )
 }

web-interface/src/components/Chart.tsx

@@ -1,19 +1,15 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react'
-import type { UsageData } from '#/routes/jobs.tsx'
+import { useState } from 'react'
+import type { UsageData } from '#/types/job.ts'
+
+export default function Chart({ data }: { data: UsageData[] }) {
+  const [index, setIndex] = useState(0)
+  const numComponents = data.length
+
+  const handlePrev = () =>
+    setIndex((i) => (i - 1 + numComponents) % numComponents)
+  const handleNext = () => setIndex((i) => (i + 1) % numComponents)
 
-export default function Chart({
-  data,
-  index,
-  numComponents,
-  onPrev,
-  onNext,
-}: {
-  data: UsageData
-  index: number
-  numComponents: number
-  onPrev: () => void
-  onNext: () => void
-}) {
   const max = 100
   const width = 600
   const height = 180
@@ -24,8 +20,8 @@ export default function Chart({
   const chartW = width - padLeft - padRight
   const chartH = height - padTop - padBottom
 
-  const points = data.observations.map((val, i) => {
-    const x = padLeft + (i / (data.observations.length - 1)) * chartW
+  const points = data[index].observations.map((val, i) => {
+    const x = padLeft + (i / (data[index].observations.length - 1)) * chartW
     const y = padTop + chartH - (val / max) * chartH
     return `${x},${y}`
   })
@@ -58,11 +54,11 @@ export default function Chart({
   return (
     <div className="mt-4">
       <h3 className="text-center font-semibold text-sm mb-1">
-        {data.component}
+        {data[index].component}
       </h3>
       <div className="flex items-center gap-2">
         <button
-          onClick={onPrev}
+          onClick={handlePrev}
           className="text-gray-400 hover:text-main p-1"
           aria-label="Previous Component"
         >
@@ -121,7 +117,7 @@ export default function Chart({
           />
         </svg>
         <button
-          onClick={onNext}
+          onClick={handleNext}
           className="text-gray-400 hover:text-main p-1"
           aria-label="Next Component"
         >