Add Codemirror support and enhance API for binding updates

- Integrated Codemirror dependencies for improved code editing capabilities.
- Added new UpdateBindingRequest and UpdateBindingResponse interfaces to the API for updating existing bindings.
- Implemented updateBinding function in the API to handle binding updates, including validation and persistence to the configuration file.
- Introduced a TagInput component for managing channel IDs and allowed users in the settings interface.
- Enhanced the Settings component to support editing and updating bindings with the new TagInput functionality.

Author: jamiepine

interface/bun.lock

@@ -9,6 +9,11 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@codemirror/language": "^6.12.1",
+		"@codemirror/legacy-modes": "^6.5.2",
+		"@codemirror/state": "^6.5.4",
+		"@codemirror/theme-one-dark": "^6.1.3",
+		"@codemirror/view": "^6.39.14",
 		"@fontsource/ibm-plex-sans": "^5.1.0",
 		"@fortawesome/fontawesome-svg-core": "^7.2.0",
 		"@fortawesome/free-brands-svg-icons": "^7.2.0",
@@ -35,6 +40,7 @@
 		"@tanstack/router-devtools": "^1.159.5",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"codemirror": "^6.0.2",
 		"framer-motion": "^12.34.0",
 		"graphology": "^0.26.0",
 		"graphology-layout-forceatlas2": "^0.10.1",
@@ -46,6 +52,7 @@
 		"recharts": "^3.7.0",
 		"remark-gfm": "^4.0.1",
 		"sigma": "^3.0.2",
+		"smol-toml": "^1.6.0",
 		"sonner": "^2.0.7",
 		"zod": "^4.3.6"
 	},

interface/package.json

@@ -738,6 +738,26 @@ export interface CreateBindingResponse {
 	message: string;
 }
 
+export interface UpdateBindingRequest {
+	original_agent_id: string;
+	original_channel: string;
+	original_guild_id?: string;
+	original_workspace_id?: string;
+	original_chat_id?: string;
+	agent_id: string;
+	channel: string;
+	guild_id?: string;
+	workspace_id?: string;
+	chat_id?: string;
+	channel_ids?: string[];
+	dm_allowed_users?: string[];
+}
+
+export interface UpdateBindingResponse {
+	success: boolean;
+	message: string;
+}
+
 export interface DeleteBindingRequest {
 	agent_id: string;
 	channel: string;
@@ -775,6 +795,15 @@ export interface GlobalSettingsUpdateResponse {
 	requires_restart: boolean;
 }
 
+export interface RawConfigResponse {
+	content: string;
+}
+
+export interface RawConfigUpdateResponse {
+	success: boolean;
+	message: string;
+}
+
 export const api = {
 	status: () => fetchJson<StatusResponse>("/status"),
 	overview: () => fetchJson<InstanceOverviewResponse>("/overview"),
@@ -1023,6 +1052,18 @@ export const api = {
 		return response.json() as Promise<CreateBindingResponse>;
 	},
 
+	updateBinding: async (request: UpdateBindingRequest) => {
+		const response = await fetch(`${API_BASE}/bindings`, {
+			method: "PUT",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(request),
+		});
+		if (!response.ok) {
+			throw new Error(`API error: ${response.status}`);
+		}
+		return response.json() as Promise<UpdateBindingResponse>;
+	},
+
 	deleteBinding: async (request: DeleteBindingRequest) => {
 		const response = await fetch(`${API_BASE}/bindings`, {
 			method: "DELETE",
@@ -1050,6 +1091,20 @@ export const api = {
 		return response.json() as Promise<GlobalSettingsUpdateResponse>;
 	},
 
+	// Raw config API
+	rawConfig: () => fetchJson<RawConfigResponse>("/config/raw"),
+	updateRawConfig: async (content: string) => {
+		const response = await fetch(`${API_BASE}/config/raw`, {
+			method: "PUT",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ content }),
+		});
+		if (!response.ok) {
+			throw new Error(`API error: ${response.status}`);
+		}
+		return response.json() as Promise<RawConfigUpdateResponse>;
+	},
+
 	// Update API
 	updateCheck: () => fetchJson<UpdateStatus>("/update/check"),
 	updateCheckNow: async () => {

interface/src/api/client.ts

@@ -0,0 +1,74 @@
+import {useState, useRef, KeyboardEvent} from "react";
+import {X} from "lucide-react";
+import {Input} from "@/ui";
+
+interface TagInputProps {
+	value: string[];
+	onChange: (tags: string[]) => void;
+	placeholder?: string;
+	className?: string;
+}
+
+export function TagInput({value, onChange, placeholder, className}: TagInputProps) {
+	const [inputValue, setInputValue] = useState("");
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const addTag = (tag: string) => {
+		const trimmed = tag.trim();
+		if (trimmed && !value.includes(trimmed)) {
+			onChange([...value, trimmed]);
+			setInputValue("");
+		}
+	};
+
+	const removeTag = (tagToRemove: string) => {
+		onChange(value.filter((tag) => tag !== tagToRemove));
+	};
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			addTag(inputValue);
+		} else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+			removeTag(value[value.length - 1]);
+		}
+	};
+
+	const handleBlur = () => {
+		if (inputValue.trim()) {
+			addTag(inputValue);
+		}
+	};
+
+	return (
+		<div className={className}>
+			<div className="flex flex-wrap gap-2 p-2 border border-paper-darker rounded-md bg-paper-dark min-h-[42px] focus-within:ring-2 focus-within:ring-ink-faint/20">
+				{value.map((tag) => (
+					<div
+						key={tag}
+						className="flex items-center gap-1 px-2 py-1 bg-paper-darker border border-paper-darkest rounded text-sm text-ink"
+					>
+						<span>{tag}</span>
+						<button
+							type="button"
+							onClick={() => removeTag(tag)}
+							className="text-ink-faint hover:text-ink transition-colors"
+						>
+							<X size={14} />
+						</button>
+					</div>
+				))}
+				<input
+					ref={inputRef}
+					type="text"
+					value={inputValue}
+					onChange={(e) => setInputValue(e.target.value)}
+					onKeyDown={handleKeyDown}
+					onBlur={handleBlur}
+					placeholder={value.length === 0 ? placeholder : ""}
+					className="flex-1 min-w-[120px] bg-transparent border-none outline-none text-sm text-ink placeholder:text-ink-faint"
+				/>
+			</div>
+		</div>
+	);
+}