Merge pull request #93 from Digital-Alchemy-TS/client/header

Client/header

Author: chrisdrackett

Dockerfile

@@ -4,6 +4,9 @@ FROM node:22-bookworm-slim
 ENV CI=1
 ENV EXPO_NO_TELEMETRY=1
 ENV PORT=3789
+# Set UTF-8 locale to support emoji and special characters in filenames
+ENV LANG=en_US.UTF-8
+ENV LC_ALL=en_US.UTF-8
 # Don't set NODE_ENV=production yet - we need devDependencies for build
 
 # Install system dependencies needed for building native modules

apps/client/app.config.ts

@@ -1,9 +1,4 @@
-import {
-	type GenericParserBuilder,
-	parseAsInteger,
-	parseAsString,
-	type UseQueryStateOptions,
-} from "nuqs"
+import { type GenericParserBuilder, parseAsString } from "nuqs"
 
 import { codeGlueLight } from "./src/design/editorThemes"
 
@@ -41,11 +36,12 @@ export const appConfig = {
 			| StringLiteralUnion<BundledLanguage, string>
 		)[],
 	},
+	logs: {
+		defaultFontSize: 14,
+		font: "Monaspace Krypton",
+	},
 	routes: {
-		home: { title: "Home" },
-		logs: {
-			title: "Logs",
-		},
+		home: { title: "Logs" }, // home is a special route name that will show without params in the URL
 		automations: {
 			title: "Automations",
 			queryStrings: {

apps/client/public/headerLogo.png

@@ -0,0 +1,20 @@
+import { Row, useTheme } from "@code-glue/paradigm"
+
+export const Header = ({ children }: { children: React.ReactNode }) => {
+	const theme = useTheme()
+	return (
+		<Row
+			noShrink
+			align="center"
+			justify="space-between"
+			color={theme.cardStock}
+			borderBottomStyle="solid"
+			borderBottomColor={theme.uiStroke}
+			borderBottomWidth="$thinStroke"
+			height="$headerHeight"
+			px="$edgeInset"
+		>
+			{children}
+		</Row>
+	)
+}

apps/client/src/components/AutomationDetail/Footer.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useRef } from "react"
+
+import { ScrollView, type ScrollViewRef, Text } from "@code-glue/paradigm"
+import { formatAutomationContext } from "@code-glue/server/utils/helpers/format.mts"
+import {
+	LogLevel,
+	type LogLine,
+	useAutomationLogs,
+} from "@/hooks/useAutomationLogs"
+import { appConfig } from "../../app.config"
+import { useAutomation } from "../hooks/useAutomation"
+
+import type React from "react"
+import type { ScrollView as RNScrollView } from "react-native"
+
+type LogsProps = {
+	/**
+	 * filter to just show logs for a given automation ID
+	 */
+	automationId?: string
+	/**
+	 * level to filter logs by.
+	 * Defaults to LogLevel.trace
+	 */
+	level?: LogLevel
+
+	/** Optional ref for parent access to ScrollView methods */
+	ref: React.Ref<ScrollViewRef>
+}
+
+const logKey = (log: LogLine) =>
+	`${log.timestamp}-${log.level}-${log.context}-${log.msg}`
+
+const LONGEST_LEVEL_STRING = Math.max(
+	...Object.values(LogLevel).map((level) => level.length),
+)
+
+const getLogLevelPadding = (level: LogLevel) =>
+	" ".repeat(Math.max(0, LONGEST_LEVEL_STRING - level.length))
+
+export const Logs = ({
+	automationId,
+	level = LogLevel.trace,
+	ref,
+}: LogsProps) => {
+	const { automationSnapshot: automation } = useAutomation(automationId)
+
+	const loggerContext = automationId
+		? formatAutomationContext(automation.title)
+		: undefined
+
+	const options: Parameters<typeof useAutomationLogs>[0] = {
+		enabled: true,
+		level,
+	}
+
+	if (loggerContext) {
+		options.context = loggerContext
+	}
+
+	const { logs, isLoading, error } = useAutomationLogs(options)
+
+	useEffect(() => {
+		if (!isLoading && logs.length > 0 && ref?.current) {
+			// Ensure layout/paint has occurred before scrolling
+			requestAnimationFrame(() => {
+				ref.current?.scrollToEnd?.({ animated: true })
+			})
+		}
+	}, [logs, isLoading, ref?.current])
+
+	if (isLoading) {
+		return <div>Loading logs...</div>
+	}
+
+	if (error) {
+		return <div>Error: {error.message}</div>
+	}
+
+	return (
+		<ScrollView ref={ref} scrollBehavior="smooth">
+			{logs.map((log) => (
+				<Text
+					style={Text.style.footnote}
+					key={logKey(log)}
+					_style={{ fontFamily: appConfig.logs.font }}
+					color={log.isHistorical ? "$colorDisabled" : "$color"}
+				>
+					<Text
+						color={!log.isHistorical && getLevelColor(log.level)}
+						letterCase={Text.letterCase.upper}
+					>
+						{getLogLevelPadding(log.level)}[{log.level}]
+					</Text>
+					<Text>{new Date(log.timestamp).toLocaleTimeString()}</Text>
+					<Text> {log.msg}</Text>
+				</Text>
+			))}
+		</ScrollView>
+	)
+}
+
+function getLevelColor(level: string): string {
+	switch (level) {
+		case "error":
+		case "fatal":
+			return "red"
+		case "warn":
+			return "orange"
+		case "info":
+			return "blue"
+		case "debug":
+			return "gray"
+		case "trace":
+			return "lightgray"
+		default:
+			return "black"
+	}
+}

apps/client/src/components/AutomationLogs/index.tsx

@@ -3,16 +3,21 @@ import { proxy, useSnapshot } from "valtio"
 import { emptyAutomation, store } from "@/store"
 import { useRouter } from "./useRouter"
 
-export const useCurrentAutomation = () => {
-	const [{ automationId }, navigateTo] = useRouter()
-
-	const currentAutomation = automationId
+export const useAutomation = (automationId?: string | null) => {
+	const automation = automationId
 		? store.automations.get(automationId)
 		: undefined
 
-	const automationSnapshot = useSnapshot(
-		currentAutomation || proxy(emptyAutomation),
-	)
+	const automationSnapshot = useSnapshot(automation || proxy(emptyAutomation))
+
+	return { automation, automationSnapshot }
+}
+
+export const useCurrentAutomation = () => {
+	const [{ automationId }, navigateTo] = useRouter()
+
+	const { automation: currentAutomation, automationSnapshot } =
+		useAutomation(automationId)
 
 	// If the given ID isn't found on the server, fallback to the index page
 	if (automationId && currentAutomation === undefined) navigateTo("home")