Merge pull request #267 from marijnvdwerf/add-frontend-ci

Add interface CI workflow

Author: jamiepine

.github/workflows/interface-ci.yml

@@ -0,0 +1,40 @@
+name: Interface CI
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "interface/**"
+      - ".github/workflows/interface-ci.yml"
+  pull_request:
+    branches: [main]
+    paths:
+      - "interface/**"
+      - ".github/workflows/interface-ci.yml"
+
+permissions:
+  contents: read
+
+concurrency:
+  group: interface-ci-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  quality:
+    name: Interface Quality
+    runs-on: ubuntu-24.04
+    defaults:
+      run:
+        working-directory: interface
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: "1.3"
+
+      - name: Install dependencies
+        run: bun ci
+
+      - name: Typecheck
+        run: bunx tsc --noEmit

interface/src/components/ChannelSettingCard.tsx

@@ -52,13 +52,13 @@ interface PlatformCatalogProps {
 }
 
 export function PlatformCatalog({onAddInstance}: PlatformCatalogProps) {
-	const PLATFORMS: {platform: Platform; description: string}[] = [
-		{platform: "discord", description: "Discord bot integration"},
-		{platform: "slack", description: "Slack bot integration"},
-		{platform: "telegram", description: "Telegram bot integration"},
-		{platform: "twitch", description: "Twitch chat integration"},
-		{platform: "email", description: "IMAP/SMTP email integration"},
-		{platform: "webhook", description: "HTTP webhook receiver"},
+	const PLATFORMS: Platform[] = [
+		"discord",
+		"slack",
+		"telegram",
+		"twitch",
+		"email",
+		"webhook",
 	];
 
 	const COMING_SOON = [
@@ -75,7 +75,7 @@ export function PlatformCatalog({onAddInstance}: PlatformCatalogProps) {
 			<h3 className="text-xs font-semibold text-ink-faint uppercase tracking-wider mb-2">
 				Available
 			</h3>
-			{PLATFORMS.map(({platform, description}) => (
+			{PLATFORMS.map((platform) => (
 				<button
 					key={platform}
 					type="button"

interface/src/components/TagInput.tsx

@@ -1,6 +1,5 @@
 import {useState, useRef, KeyboardEvent} from "react";
 import {X} from "lucide-react";
-import {Input} from "@/ui";
 
 interface TagInputProps {
 	value: string[];

interface/src/components/TopologyGraph.tsx

@@ -96,23 +96,6 @@ function loadHandles(): SavedHandles {
 	return {};
 }
 
-function saveHandles(edges: Edge[]) {
-	const handles: SavedHandles = {};
-	for (const edge of edges) {
-		if (edge.sourceHandle && edge.targetHandle) {
-			handles[edge.id] = {
-				sourceHandle: edge.sourceHandle,
-				targetHandle: edge.targetHandle,
-			};
-		}
-	}
-	try {
-		localStorage.setItem(HANDLES_KEY, JSON.stringify(handles));
-	} catch {
-		// ignore
-	}
-}
-
 /** Deterministic gradient from a seed string. */
 function seedGradient(seed: string): [string, string] {
 	let hash = 0;

interface/src/hooks/useEventSource.ts

@@ -31,8 +31,8 @@ export function useEventSource(url: string, options: UseEventSourceOptions) {
 
 	const [connectionState, setConnectionState] = useState<ConnectionState>("connecting");
 
-	const reconnectTimeout = useRef<ReturnType<typeof setTimeout>>();
-	const eventSourceRef = useRef<EventSource>();
+	const reconnectTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const eventSourceRef = useRef<EventSource | null>(null);
 	const retryDelayRef = useRef(INITIAL_RETRY_MS);
 	const hadConnectionRef = useRef(false);
 

interface/src/routes/AgentConfig.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState, useRef } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { api, type AgentConfigResponse, type AgentConfigUpdateRequest } from "@/api/client";
-import { Button, SettingSidebarButton, Input, TextArea, Toggle, NumberStepper, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, cx } from "@/ui";
+import { Button, SettingSidebarButton, TextArea, Toggle, NumberStepper, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, cx } from "@/ui";
 import { ModelSelect } from "@/components/ModelSelect";
 import { TagInput } from "@/components/TagInput";
 import { Markdown } from "@/components/Markdown";
@@ -882,28 +882,6 @@ function ConfigSectionEditor({ sectionId, label, description, detail, config, on
 
 // -- Form Field Components --
 
-interface ConfigFieldProps {
-	label: string;
-	description: string;
-	value: string;
-	onChange: (value: string) => void;
-}
-
-function ConfigField({ label, description, value, onChange }: ConfigFieldProps) {
-	return (
-		<div className="flex flex-col gap-1.5">
-			<label className="text-sm font-medium text-ink">{label}</label>
-			<p className="text-tiny text-ink-faint">{description}</p>
-			<Input
-				type="text"
-				value={value}
-				onChange={(e) => onChange(e.target.value)}
-				className="mt-1 border-app-line/50 bg-app-darkBox/30"
-			/>
-		</div>
-	);
-}
-
 interface ConfigToggleFieldProps {
 	label: string;
 	description: string;

interface/src/routes/AgentCortex.tsx

@@ -3,7 +3,6 @@ import { useQuery } from "@tanstack/react-query";
 import { AnimatePresence, motion } from "framer-motion";
 import {
 	api,
-	CORTEX_EVENT_TYPES,
 	type CortexEvent,
 	type CortexEventType,
 } from "@/api/client";

interface/src/routes/AgentCron.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { api, type CronJobWithStats, type CreateCronRequest } from "@/api/client";
 import { formatDuration, formatTimeAgo } from "@/lib/format";
-import { AnimatePresence, motion } from "framer-motion";
 import { Clock05Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import {

interface/src/routes/AgentIngest.tsx

@@ -2,7 +2,7 @@ import {useState, useRef, useCallback} from "react";
 import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
 import {api, type IngestFileInfo} from "@/api/client";
 import {formatTimeAgo} from "@/lib/format";
-import {Button, Badge} from "@/ui";
+import {Badge} from "@/ui";
 import {clsx} from "clsx";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faTrash} from "@fortawesome/free-solid-svg-icons";

interface/src/routes/AgentMemories.tsx

@@ -22,7 +22,7 @@ import {
 	FilterButton,
 } from "@/ui";
 import { formatTimeAgo } from "@/lib/format";
-import { Search01Icon, ArrowDown01Icon, LeftToRightListBulletIcon, WorkflowSquare01Icon, IdeaIcon } from "@hugeicons/core-free-icons";
+import { ArrowDown01Icon, LeftToRightListBulletIcon, WorkflowSquare01Icon, IdeaIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 
 type ViewMode = "list" | "graph";