Add support for mouse, keyboard and controller input

package.json

@@ -11,7 +11,7 @@
     "@testing-library/user-event": "^14.5.2",
     "framer-motion": "^11",
     "immutable": "^4.3.6",
-    "nighthouse": "3.0.5",
+    "nighthouse": "4.0.0",
     "react": "^18.3.1",
     "react-card-flip": "^1.2.3",
     "react-dom": "^18.3.1",

src/App.tsx

@@ -6,21 +6,26 @@ import { WindowDimensionsContextProvider } from '@luna/contexts/env/WindowDimens
 import { router } from '@luna/routes';
 import { HeroUIProvider } from '@heroui/react';
 import { RouterProvider } from 'react-router-dom';
+import { ClientIdContextProvider } from '@luna/contexts/env/ClientIdContext';
+
+const clientId = crypto.randomUUID();
 
 export function App() {
   return (
     <HeroUIProvider>
-      <ColorSchemeContextProvider>
-        <WindowDimensionsContextProvider>
-          <AuthContextProvider>
-            <ModelContextProvider>
-              <SearchContextProvider>
-                <RouterProvider router={router} />
-              </SearchContextProvider>
-            </ModelContextProvider>
-          </AuthContextProvider>
-        </WindowDimensionsContextProvider>
-      </ColorSchemeContextProvider>
+      <ClientIdContextProvider clientId={clientId}>
+        <ColorSchemeContextProvider>
+          <WindowDimensionsContextProvider>
+            <AuthContextProvider>
+              <ModelContextProvider>
+                <SearchContextProvider>
+                  <RouterProvider router={router} />
+                </SearchContextProvider>
+              </ModelContextProvider>
+            </AuthContextProvider>
+          </WindowDimensionsContextProvider>
+        </ColorSchemeContextProvider>
+      </ClientIdContextProvider>
     </HeroUIProvider>
   );
 }

src/components/BooleanCheck.tsx

@@ -0,0 +1,19 @@
+import { ColorSchemeContext } from '@luna/contexts/env/ColorSchemeContext';
+import { IconCheck, IconX } from '@tabler/icons-react';
+import { useContext } from 'react';
+
+export interface BooleanCheckProps {
+  value: boolean;
+}
+
+export function BooleanCheck({ value }: BooleanCheckProps) {
+  const { colorScheme } = useContext(ColorSchemeContext);
+
+  return value ? (
+    <IconCheck
+      color={colorScheme.isDark ? 'rgb(60, 255, 0)' : 'rgb(0, 180, 0)'}
+    />
+  ) : (
+    <IconX color="red" />
+  );
+}

src/components/BooleanChip.tsx

@@ -0,0 +1,13 @@
+import { Chip } from '@heroui/react';
+
+export interface BooleanChipProps {
+  value: boolean;
+}
+
+export function BooleanChip({ value }: BooleanChipProps) {
+  return (
+    <Chip color={value ? 'success' : 'danger'} variant="flat">
+      {value ? 'yes' : 'no'}
+    </Chip>
+  );
+}

src/screens/home/admin/MonitorInspectorTable.tsx → src/components/ObjectInspectorTable.tsx

@@ -5,47 +5,48 @@ import {
   TableColumn,
   TableRow,
 } from '@heroui/react';
+import { ObjectInspectorValue } from '@luna/components/ObjectInspectorValue';
 import { ReactNode, useCallback, useMemo } from 'react';
 import { TableBody, TableHeader } from 'react-stately';
 
-// TODO: Generalize this to a generic component for data tables?
+export type Names<T> = { [Property in keyof T]?: string };
 
-export interface MonitorInspectorTableProps<T> {
-  metrics: T[];
-  names: { [Property in keyof T]?: string };
+export interface ObjectInspectorTableProps<T extends object> {
+  objects: T[];
+  names: Names<T>;
   selection?: keyof T;
   onSelect?: (prop?: keyof T) => void;
-  render: <K extends keyof T>(value: T[K], prop: K) => ReactNode;
+  render?: <K extends keyof T>(value: T[K], prop: K) => ReactNode;
 }
 
-export function MonitorInspectorTable<T extends object>({
-  metrics,
+export function ObjectInspectorTable<T extends object>({
+  objects,
   names,
   selection,
   onSelect,
-  render,
-}: MonitorInspectorTableProps<T>) {
+  render = (value, _prop) => <ObjectInspectorValue value={value} />,
+}: ObjectInspectorTableProps<T>) {
   const columns = useMemo(
     () =>
-      [...Array(metrics.length + 1).keys()].map(i => ({
+      [...Array(objects.length + 1).keys()].map(i => ({
         key: `${i}`,
       })),
-    [metrics.length]
+    [objects.length]
   );
 
   const rows = useMemo(
     () =>
-      metrics.length > 0
+      objects.length > 0
         ? (Object.keys(names) as (keyof T)[]).map(prop => ({
             key: prop as string,
             prop,
-            values: [names[prop], ...metrics.map(v => v[prop])] as [
+            values: [names[prop], ...objects.map(v => v[prop])] as [
               string,
               ...T[keyof T][],
             ],
           }))
         : [],
-    [metrics, names]
+    [objects, names]
   );
 
   const onSelectionChange = useCallback(
@@ -65,7 +66,7 @@ export function MonitorInspectorTable<T extends object>({
       classNames={{
         table: 'bg-red',
       }}
-      isStriped
+      removeWrapper
       isCompact
       selectedKeys={[selection as string]}
       selectionMode={selection || onSelect ? 'single' : undefined}

src/components/ObjectInspectorValue.tsx

@@ -0,0 +1,68 @@
+import { BooleanCheck } from '@luna/components/BooleanCheck';
+import { isBounded } from '@luna/utils/bounded';
+import * as vec2 from '@luna/utils/vec2';
+
+export interface ObjectInspectorValueProps {
+  value: any;
+  unit?: string;
+  precision?: number;
+}
+
+export function ObjectInspectorValue({
+  value,
+  unit,
+  precision,
+}: ObjectInspectorValueProps) {
+  return (
+    <div className="flex flex-row gap-1">
+      <ObjectInspectorRawValue value={value} precision={precision} />
+      <div>{unit}</div>
+    </div>
+  );
+}
+
+function ObjectInspectorRawValue({
+  value,
+  precision = 4,
+}: {
+  value: any;
+  precision?: number;
+}) {
+  if (value === null) {
+    return <>null</>;
+  }
+  if (value === undefined) {
+    return <>undefined</>;
+  }
+  switch (typeof value) {
+    case 'string':
+      return <>{value}</>;
+    case 'number':
+      return <>{Number.isInteger(value) ? value : value.toFixed(precision)}</>;
+    case 'boolean':
+      return <BooleanCheck value={value} />;
+    case 'object':
+      if (vec2.isInstance(value)) {
+        return (
+          <div className="flex flex-col">
+            <span>
+              x: <ObjectInspectorRawValue value={value.x} precision={2} />
+            </span>
+            <span>
+              y: <ObjectInspectorRawValue value={value.y} precision={2} />
+            </span>
+          </div>
+        );
+      } else if (isBounded(value)) {
+        return (
+          <>
+            <ObjectInspectorRawValue value={value.value} /> of{' '}
+            <ObjectInspectorRawValue value={value.total} />
+          </>
+        );
+      }
+      return <>{JSON.stringify(value)}</>;
+    default:
+      return <>?</>;
+  }
+}

src/components/RouteLink.tsx

@@ -1,12 +1,9 @@
 import { Button } from '@heroui/react';
 import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
-import { ElementType, ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback, useState } from 'react';
 import { NavLink } from 'react-router-dom';
-import { AnimatePresence as AnimatePresenceFM, motion } from 'framer-motion';
-
-// Workaround for https://github.com/framer/motion/issues/1509
-// See https://github.com/withastro/astro/issues/8195#issuecomment-2613930022
-const AnimatePresence = AnimatePresenceFM as ElementType;
+import { motion } from 'framer-motion';
+import { AnimatePresence } from '@luna/utils/motion';
 
 interface RouteLinkParams {
   icon: ReactNode;

src/constants/LocalStorageKey.ts

@@ -3,4 +3,5 @@ export enum LocalStorageKey {
   ColorSchemeFollowsSystem = 'luna.contexts.colorScheme.followsSystem',
   AdminResourcesLayout = 'luna.screens.home.admin.resources.layout',
   DisplaysZoom = 'luna.screens.home.displays.zoom',
+  DisplayInputConfig = 'luna.screens.home.display.inputConfig',
 }

src/contexts/api/model/ModelContext.tsx

@@ -8,6 +8,8 @@ import {
   connect,
   ConsoleLogHandler,
   DirectoryTree,
+  InputEvent,
+  LegacyInputEvent,
   LeveledLogHandler,
   Lighthouse,
   LIGHTHOUSE_FRAME_BYTES,
@@ -32,10 +34,7 @@ export interface Users {
   readonly active: Set<string>;
 }
 
-export interface ModelContextValue {
-  /** The user models, active users etc. */
-  readonly users: Users;
-
+export interface ModelAPI {
   /** Lists an arbitrary path. */
   list(path: string[]): Promise<Result<DirectoryTree>>;
 
@@ -51,6 +50,15 @@ export interface ModelContextValue {
   /** Updates a resource at an arbitrary path. */
   put(path: string[], payload: any): Promise<Result<unknown>>;
 
+  /** Sends a legacy input event for the given user to the given endpoint. */
+  putLegacyInput(
+    user: string,
+    payload: LegacyInputEvent
+  ): Promise<Result<unknown>>;
+
+  /** Sends an input event for the given user to the given endpoint. */
+  putInput(user: string, payload: InputEvent): Promise<Result<unknown>>;
+
   /** Creates a directory at an arbitrary path. */
   mkdir(path: string[]): Promise<Result<unknown>>;
 
@@ -64,21 +72,34 @@ export interface ModelContextValue {
   getLaserMetrics(): Promise<Result<LaserMetrics>>;
 }
 
+export interface ModelContextValue {
+  /** The user models, active users etc. */
+  readonly users: Users;
+
+  /** A facility interact with the model server API. */
+  readonly api: ModelAPI;
+}
+
 export const ModelContext = createContext<ModelContextValue>({
   users: {
     models: Map(),
     active: Set(),
   },
-  list: async () => errorResult('No model context for listing path'),
-  get: async () => errorResult('No model context for fetching path'),
-  delete: async () => errorResult('No model context for deleting path'),
-  put: async () => errorResult('No model context for updating resource'),
-  create: async () => errorResult('No model context for creating resource'),
-  mkdir: async () => errorResult('No model context for creating directory'),
-  isDirectory: async () => false,
-  move: async () => errorResult('No model context for moving resource'),
-  getLaserMetrics: async () =>
-    errorResult('No model context for fetching laser metrics'),
+  api: {
+    list: async () => errorResult('No model context for listing path'),
+    get: async () => errorResult('No model context for fetching path'),
+    delete: async () => errorResult('No model context for deleting path'),
+    put: async () => errorResult('No model context for updating resource'),
+    putLegacyInput: async () =>
+      errorResult('No model context for putting input'),
+    putInput: async () => errorResult('No model context for putting input'),
+    create: async () => errorResult('No model context for creating resource'),
+    mkdir: async () => errorResult('No model context for creating directory'),
+    isDirectory: async () => false,
+    move: async () => errorResult('No model context for moving resource'),
+    getLaserMetrics: async () =>
+      errorResult('No model context for fetching laser metrics'),
+  },
 });
 
 interface ModelContextProviderProps {
@@ -195,9 +216,8 @@ export function ModelContextProvider({ children }: ModelContextProviderProps) {
 
   useAsyncIterable(getUserStreams, consumeUserStreams);
 
-  const value: ModelContextValue = useMemo(
+  const api: ModelAPI = useMemo(
     () => ({
-      users,
       async list(path) {
         return messageToResult(await client?.list(path));
       },
@@ -210,6 +230,12 @@ export function ModelContextProvider({ children }: ModelContextProviderProps) {
       async put(path, payload) {
         return messageToResult(await client?.put(path, payload));
       },
+      async putLegacyInput(user, payload) {
+        return messageToResult(await client?.putModel(payload, user));
+      },
+      async putInput(user, payload) {
+        return messageToResult(await client?.putInput(payload, user));
+      },
       async create(path) {
         return messageToResult(await client?.create(path));
       },
@@ -245,7 +271,15 @@ export function ModelContextProvider({ children }: ModelContextProviderProps) {
         return (await this.get(['metrics', 'laser'])) as Result<LaserMetrics>;
       },
     }),
-    [client, users]
+    [client]
+  );
+
+  const value: ModelContextValue = useMemo(
+    () => ({
+      users,
+      api,
+    }),
+    [users, api]
   );
 
   return (