{
+ // Ensure run_on_host is explicitly a boolean (not undefined)
+ const sanitizedRequest = {
+ command: request.command,
+ target_type: request.target_type,
+ target_id: request.target_id,
+ run_on_host: Boolean(request.run_on_host),
+ ...(request.vmid ? { vmid: String(request.vmid) } : {}),
+ ...(request.target_host ? { target_host: request.target_host } : {}),
+ };
+ const body = JSON.stringify(sanitizedRequest);
+ console.log('[AI] runCommand request:', request);
+ console.log('[AI] runCommand sanitized:', sanitizedRequest);
+ console.log('[AI] runCommand body:', body);
+ console.log('[AI] runCommand body length:', body.length);
return apiFetchJSON(`${this.baseUrl}/ai/run-command`, {
method: 'POST',
- body: JSON.stringify(request),
+ body,
}) as Promise<{ output: string; success: boolean; error?: string }>;
}
+
+ // Investigate an alert with AI (one-click investigation)
+ static async investigateAlert(
+ request: {
+ alert_id: string;
+ resource_id: string;
+ resource_name: string;
+ resource_type: string;
+ alert_type: string;
+ level: string;
+ value: number;
+ threshold: number;
+ message: string;
+ duration: string;
+ node?: string;
+ vmid?: number;
+ },
+ onEvent: (event: AIStreamEvent) => void,
+ signal?: AbortSignal
+ ): Promise
{
+ console.log('[AI] Starting alert investigation:', request);
+
+ const response = await apiFetch(`${this.baseUrl}/ai/investigate-alert`, {
+ method: 'POST',
+ body: JSON.stringify(request),
+ headers: {
+ 'Content-Type': 'application/json',
+ Accept: 'text/event-stream',
+ },
+ signal,
+ });
+
+ if (!response.ok) {
+ const text = await response.text();
+ throw new Error(text || `Request failed with status ${response.status}`);
+ }
+
+ const reader = response.body?.getReader();
+ if (!reader) {
+ throw new Error('No response body');
+ }
+
+ const decoder = new TextDecoder();
+ let buffer = '';
+ // 5 minutes timeout - Opus models can take a long time
+ const STREAM_TIMEOUT_MS = 300000;
+ let lastEventTime = Date.now();
+
+ try {
+ while (true) {
+ if (Date.now() - lastEventTime > STREAM_TIMEOUT_MS) {
+ console.warn('[AI] Alert investigation stream timeout');
+ break;
+ }
+
+ const readPromise = reader.read();
+ const timeoutPromise = new Promise((_, reject) => {
+ setTimeout(() => reject(new Error('Read timeout')), STREAM_TIMEOUT_MS);
+ });
+
+ let result: ReadableStreamReadResult;
+ try {
+ result = await Promise.race([readPromise, timeoutPromise]);
+ } catch (e) {
+ if ((e as Error).message === 'Read timeout') break;
+ throw e;
+ }
+
+ const { done, value } = result;
+ if (done) break;
+
+ lastEventTime = Date.now();
+ buffer += decoder.decode(value, { stream: true });
+
+ const normalizedBuffer = buffer.replace(/\r\n/g, '\n');
+ const messages = normalizedBuffer.split('\n\n');
+ buffer = messages.pop() || '';
+
+ for (const message of messages) {
+ if (!message.trim() || message.trim().startsWith(':')) continue;
+
+ const dataLines = message.split('\n').filter((line) => line.startsWith('data: '));
+ for (const line of dataLines) {
+ try {
+ const jsonStr = line.slice(6);
+ if (!jsonStr.trim()) continue;
+ const data = JSON.parse(jsonStr);
+ onEvent(data as AIStreamEvent);
+ } catch (e) {
+ console.error('[AI] Failed to parse investigation event:', e);
+ }
+ }
+ }
+ }
+ } finally {
+ reader.releaseLock();
+ }
+ }
+
// Execute an AI prompt with streaming
// Returns an abort function to cancel the request
static async executeStream(
@@ -88,30 +202,89 @@ export class AIAPI {
const decoder = new TextDecoder();
let buffer = '';
+ let lastEventTime = Date.now();
+ let receivedComplete = false;
+ let receivedDone = false;
+
+ // Timeout to detect stalled streams (5 minutes - Opus models can take a long time)
+ const STREAM_TIMEOUT_MS = 300000;
console.log('[AI SSE] Starting to read stream...');
try {
while (true) {
- const { done, value } = await reader.read();
- if (done) {
- console.log('[AI SSE] Stream ended');
+ // Check for stream timeout
+ if (Date.now() - lastEventTime > STREAM_TIMEOUT_MS) {
+ console.warn('[AI SSE] Stream timeout - no data for', STREAM_TIMEOUT_MS / 1000, 'seconds');
break;
}
+ // Create a promise with timeout for the read operation
+ const readPromise = reader.read();
+ const timeoutPromise = new Promise((_, reject) => {
+ setTimeout(() => reject(new Error('Read timeout')), STREAM_TIMEOUT_MS);
+ });
+
+ let result: ReadableStreamReadResult;
+ try {
+ result = await Promise.race([readPromise, timeoutPromise]);
+ } catch (e) {
+ if ((e as Error).message === 'Read timeout') {
+ console.warn('[AI SSE] Read timeout, ending stream');
+ break;
+ }
+ throw e;
+ }
+
+ const { done, value } = result;
+ if (done) {
+ console.log('[AI SSE] Stream ended normally');
+ break;
+ }
+
+ lastEventTime = Date.now();
const chunk = decoder.decode(value, { stream: true });
- console.log('[AI SSE] Received chunk:', chunk.length, 'bytes');
+
+ // Log chunk info only if it's not just a heartbeat
+ if (!chunk.includes(': heartbeat')) {
+ console.log('[AI SSE] Received chunk:', chunk.length, 'bytes');
+ }
+
buffer += chunk;
- // Process complete SSE messages
- const lines = buffer.split('\n\n');
- buffer = lines.pop() || ''; // Keep incomplete message in buffer
+ // Process complete SSE messages (separated by double newlines)
+ // Handle both \n\n and \r\n\r\n for cross-platform compatibility
+ const normalizedBuffer = buffer.replace(/\r\n/g, '\n');
+ const messages = normalizedBuffer.split('\n\n');
+ buffer = messages.pop() || ''; // Keep incomplete message in buffer
- for (const line of lines) {
- if (line.startsWith('data: ')) {
+ for (const message of messages) {
+ // Skip empty messages and heartbeat comments
+ if (!message.trim() || message.trim().startsWith(':')) {
+ if (message.includes('heartbeat')) {
+ console.debug('[AI SSE] Received heartbeat');
+ }
+ continue;
+ }
+
+ // Parse SSE message (can have multiple lines, look for data: prefix)
+ const dataLines = message.split('\n').filter(line => line.startsWith('data: '));
+ for (const line of dataLines) {
try {
- const data = JSON.parse(line.slice(6));
+ const jsonStr = line.slice(6); // Remove 'data: ' prefix
+ if (!jsonStr.trim()) continue;
+
+ const data = JSON.parse(jsonStr);
console.log('[AI SSE] Parsed event:', data.type, data);
+
+ // Track completion events
+ if (data.type === 'complete') {
+ receivedComplete = true;
+ }
+ if (data.type === 'done') {
+ receivedDone = true;
+ }
+
onEvent(data as AIStreamEvent);
} catch (e) {
console.error('[AI SSE] Failed to parse event:', e, line);
@@ -119,9 +292,33 @@ export class AIAPI {
}
}
}
+
+ // Process any remaining buffer content
+ if (buffer.trim() && buffer.trim().startsWith('data: ')) {
+ try {
+ const jsonStr = buffer.slice(6);
+ if (jsonStr.trim()) {
+ const data = JSON.parse(jsonStr);
+ console.log('[AI SSE] Parsed final buffered event:', data.type);
+ onEvent(data as AIStreamEvent);
+ if (data.type === 'complete') receivedComplete = true;
+ if (data.type === 'done') receivedDone = true;
+ }
+ } catch (e) {
+ console.warn('[AI SSE] Could not parse remaining buffer:', buffer.substring(0, 100));
+ }
+ }
+
+ // If we ended without receiving a done event, send a synthetic one
+ // This ensures the UI properly clears the streaming state
+ if (!receivedDone) {
+ console.warn('[AI SSE] Stream ended without done event, sending synthetic done');
+ onEvent({ type: 'done', data: undefined });
+ }
+
} finally {
reader.releaseLock();
- console.log('[AI SSE] Reader released');
+ console.log('[AI SSE] Reader released, receivedComplete:', receivedComplete, 'receivedDone:', receivedDone);
}
}
}
diff --git a/frontend-modern/src/api/charts.ts b/frontend-modern/src/api/charts.ts
new file mode 100644
index 000000000..ced0d904f
--- /dev/null
+++ b/frontend-modern/src/api/charts.ts
@@ -0,0 +1,65 @@
+/**
+ * Charts API
+ *
+ * Fetches historical metrics data from the backend for sparkline visualizations.
+ * The backend maintains proper historical data with 30s sample intervals.
+ */
+
+import { apiFetchJSON } from '@/utils/apiClient';
+
+// Types matching backend response format
+export interface MetricPoint {
+ timestamp: number; // Unix timestamp in milliseconds
+ value: number;
+}
+
+export interface ChartData {
+ cpu?: MetricPoint[];
+ memory?: MetricPoint[];
+ disk?: MetricPoint[];
+ diskread?: MetricPoint[];
+ diskwrite?: MetricPoint[];
+ netin?: MetricPoint[];
+ netout?: MetricPoint[];
+}
+
+export interface ChartStats {
+ oldestDataTimestamp: number;
+}
+
+export interface ChartsResponse {
+ data: Record; // VM/Container data keyed by ID
+ nodeData: Record; // Node data keyed by ID
+ storageData: Record; // Storage data keyed by ID
+ timestamp: number;
+ stats: ChartStats;
+}
+
+export type TimeRange = '5m' | '15m' | '30m' | '1h' | '4h' | '12h' | '24h' | '7d';
+
+export class ChartsAPI {
+ private static baseUrl = '/api';
+
+ /**
+ * Fetch historical chart data for all resources
+ * @param range Time range to fetch (default: 1h)
+ */
+ static async getCharts(range: TimeRange = '1h'): Promise {
+ const url = `${this.baseUrl}/charts?range=${range}`;
+ return apiFetchJSON(url);
+ }
+
+ /**
+ * Fetch storage-specific chart data
+ * @param rangeMinutes Range in minutes (default: 60)
+ */
+ static async getStorageCharts(rangeMinutes: number = 60): Promise> {
+ const url = `${this.baseUrl}/storage/charts?range=${rangeMinutes}`;
+ return apiFetchJSON(url);
+ }
+}
diff --git a/frontend-modern/src/components/AI/AIChat.tsx b/frontend-modern/src/components/AI/AIChat.tsx
index 302e1d289..3894adc57 100644
--- a/frontend-modern/src/components/AI/AIChat.tsx
+++ b/frontend-modern/src/components/AI/AIChat.tsx
@@ -5,6 +5,7 @@ import { notificationStore } from '@/stores/notifications';
import { logger } from '@/utils/logger';
import { aiChatStore } from '@/stores/aiChat';
import { useWebSocket } from '@/App';
+import { GuestNotes } from './GuestNotes';
import type {
AIToolExecution,
AIStreamEvent,
@@ -41,13 +42,16 @@ interface PendingApproval {
toolId: string;
toolName: string;
runOnHost: boolean;
+ targetHost?: string; // Explicit host for command routing
isExecuting?: boolean;
}
+
interface Message {
id: string;
role: 'user' | 'assistant';
content: string;
+ thinking?: string; // DeepSeek reasoning/thinking content
timestamp: Date;
model?: string;
tokens?: { input: number; output: number };
@@ -325,6 +329,31 @@ export const AIChat: Component = (props) => {
};
setMessages((prev) => [...prev, streamingMessage]);
+ // Safety timeout - clear streaming state if we don't get any completion event
+ // This prevents the UI from getting stuck in a streaming state
+ let lastEventTime = Date.now();
+ const SAFETY_TIMEOUT_MS = 120000; // 2 minutes
+
+ const safetyCheckInterval = setInterval(() => {
+ const timeSinceLastEvent = Date.now() - lastEventTime;
+ if (timeSinceLastEvent > SAFETY_TIMEOUT_MS) {
+ console.warn('[AIChat] Safety timeout - forcing stream completion after', SAFETY_TIMEOUT_MS / 1000, 'seconds of inactivity');
+ clearInterval(safetyCheckInterval);
+ setMessages((prev) =>
+ prev.map((msg) =>
+ msg.id === assistantId && msg.isStreaming
+ ? { ...msg, isStreaming: false, content: msg.content || '(Request timed out - no response received)' }
+ : msg
+ )
+ );
+ setIsLoading(false);
+ if (abortControllerRef) {
+ abortControllerRef.abort();
+ abortControllerRef = null;
+ }
+ }
+ }, 10000); // Check every 10 seconds
+
try {
await AIAPI.executeStream(
{
@@ -335,6 +364,7 @@ export const AIChat: Component = (props) => {
history: history.length > 0 ? history : undefined,
},
(event: AIStreamEvent) => {
+ lastEventTime = Date.now(); // Update last event time
console.log('[AIChat] Received event:', event.type, event);
// Update the streaming message based on event type
setMessages((prev) =>
@@ -370,6 +400,13 @@ export const AIChat: Component = (props) => {
toolCalls: [...(msg.toolCalls || []), newToolCall],
};
}
+ case 'thinking': {
+ const thinking = event.data as string;
+ return {
+ ...msg,
+ thinking: (msg.thinking || '') + thinking,
+ };
+ }
case 'content': {
const content = event.data as string;
return {
@@ -409,6 +446,16 @@ export const AIChat: Component = (props) => {
content: `Error: ${errorMsg}`,
};
}
+ case 'processing': {
+ // Show processing status for multi-iteration calls
+ const status = event.data as string;
+ console.log('[AIChat] Processing:', status);
+ // Add as a pending tool for visual feedback
+ return {
+ ...msg,
+ pendingTools: [{ name: 'processing', input: status }],
+ };
+ }
case 'approval_needed': {
const data = event.data as AIStreamApprovalNeededData;
return {
@@ -417,10 +464,12 @@ export const AIChat: Component = (props) => {
command: data.command,
toolId: data.tool_id,
toolName: data.tool_name,
- runOnHost: data.run_on_host,
+ runOnHost: data.run_on_host ?? false, // Default to false if undefined
+ targetHost: data.target_host, // Pass through the explicit routing target
}],
};
}
+
default:
return msg;
}
@@ -448,6 +497,7 @@ export const AIChat: Component = (props) => {
)
);
} finally {
+ clearInterval(safetyCheckInterval);
abortControllerRef = null;
setIsLoading(false);
}
@@ -472,11 +522,11 @@ export const AIChat: Component = (props) => {
prev.map((m) =>
m.id === messageId
? {
- ...m,
- pendingApprovals: m.pendingApprovals?.map((a) =>
- a.toolId === approval.toolId ? { ...a, isExecuting: true } : a
- ),
- }
+ ...m,
+ pendingApprovals: m.pendingApprovals?.map((a) =>
+ a.toolId === approval.toolId ? { ...a, isExecuting: true } : a
+ ),
+ }
: m
)
);
@@ -491,8 +541,10 @@ export const AIChat: Component = (props) => {
target_id: targetId() || '',
run_on_host: approval.runOnHost,
vmid,
+ target_host: approval.targetHost, // Pass through the explicit routing target
});
+
// Move from pending approvals to completed tool calls
setMessages((prev) =>
prev.map((m) => {
@@ -528,11 +580,11 @@ export const AIChat: Component = (props) => {
prev.map((m) =>
m.id === messageId
? {
- ...m,
- pendingApprovals: m.pendingApprovals?.map((a) =>
- a.toolId === approval.toolId ? { ...a, isExecuting: false } : a
- ),
- }
+ ...m,
+ pendingApprovals: m.pendingApprovals?.map((a) =>
+ a.toolId === approval.toolId ? { ...a, isExecuting: false } : a
+ ),
+ }
: m
)
);
@@ -542,9 +594,8 @@ export const AIChat: Component = (props) => {
// Panel renders as flex child, width controlled by isOpen state
return (
{/* Header */}
@@ -673,23 +724,40 @@ export const AIChat: Component = (props) => {
class={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
>
+ {/* Show thinking/reasoning content (DeepSeek) */}
+
+
+
+
+
+ Thinking...
+ ({message.thinking!.length} chars)
+
+
+ {message.thinking!.length > 2000 ? message.thinking!.substring(0, 2000) + '...' : message.thinking}
+
+
+
+
{/* Show completed tool calls FIRST - chronological order */}
0}>
{(tool) => (
-
+
@@ -734,11 +802,10 @@ export const AIChat: Component
= (props) => {
{/* Status indicator */}
-
+ 'bg-yellow-500'
+ }`} />
{/* Check if already added */}
@@ -956,6 +1020,15 @@ export const AIChat: Component = (props) => {
Add VMs, containers, or hosts to provide context for your questions
+
+ {/* Guest Notes - show for first context item */}
+ 0}>
+
+