sparkecoder 0.1.21 → 0.1.23

package/web/.next/standalone/web/src/hooks/use-workspace-files.ts

@@ -0,0 +1,108 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { getWorkspaceFiles, type WorkspaceFile } from '@/lib/api';
+
+interface UseWorkspaceFilesOptions {
+  sessionId: string;
+  query: string;
+  enabled?: boolean;
+  limit?: number;
+  debounceMs?: number;
+}
+
+interface UseWorkspaceFilesResult {
+  files: WorkspaceFile[];
+  isLoading: boolean;
+  error: string | null;
+  workingDirectory: string | null;
+}
+
+/**
+ * Hook to fetch workspace files for @ mentions with debouncing
+ */
+export function useWorkspaceFiles({
+  sessionId,
+  query,
+  enabled = true,
+  limit = 20,
+  debounceMs = 150,
+}: UseWorkspaceFilesOptions): UseWorkspaceFilesResult {
+  const [files, setFiles] = useState<WorkspaceFile[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [workingDirectory, setWorkingDirectory] = useState<string | null>(null);
+  
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const fetchFiles = useCallback(async (searchQuery: string) => {
+    // Cancel any previous request
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    abortControllerRef.current = new AbortController();
+
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await getWorkspaceFiles(sessionId, searchQuery, limit);
+      
+      setFiles(response.files);
+      setWorkingDirectory(response.workingDirectory);
+      
+      if (response.error) {
+        setError(response.error);
+      }
+    } catch (err) {
+      if (err instanceof Error && err.name !== 'AbortError') {
+        setError(err.message);
+        setFiles([]);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sessionId, limit]);
+
+  useEffect(() => {
+    if (!enabled || !sessionId) {
+      setFiles([]);
+      return;
+    }
+
+    // Clear previous timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    // Debounce the fetch
+    timeoutRef.current = setTimeout(() => {
+      fetchFiles(query);
+    }, debounceMs);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [query, enabled, sessionId, debounceMs, fetchFiles]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    files,
+    isLoading,
+    error,
+    workingDirectory,
+  };
+}

package/web/.next/standalone/web/src/lib/api.ts

@@ -49,7 +49,24 @@ export interface ToolResultContentPart {
   result?: unknown; // AI SDK uses 'result' in some places
 }
 
-export type ContentPart = TextContentPart | ReasoningContentPart | ToolCallContentPart | ToolResultContentPart;
+// User message content parts (for multimodal messages)
+export interface ImageContentPart {
+  type: 'image';
+  image: string; // base64 data URL or raw base64
+  mediaType?: string;
+  filename?: string; // Original filename for context
+  savedPath?: string; // Path where file was saved on disk
+}
+
+export interface FileContentPart {
+  type: 'file';
+  data: string; // base64 data
+  mediaType?: string;
+  filename?: string;
+  savedPath?: string; // Path where file was saved on disk
+}
+
+export type ContentPart = TextContentPart | ReasoningContentPart | ToolCallContentPart | ToolResultContentPart | ImageContentPart | FileContentPart;
 
 // AI SDK ModelMessage format (as returned by backend)
 export interface Message {
@@ -235,6 +252,7 @@ function parseSSEStream(
 
     const decoder = new TextDecoder();
     let buffer = '';
+    const shouldDebugSSE = typeof window !== 'undefined' && (window as any).__sparkeSseDebug === true;
 
     try {
       while (true) {
@@ -257,10 +275,34 @@ function parseSSEStream(
               if (event.type === 'data-stream-id' && onStreamId) {
                 onStreamId(event.streamId);
               }
-              
+
+              if (shouldDebugSSE && typeof window !== 'undefined') {
+                window.dispatchEvent(new CustomEvent('sparke:sse-event', {
+                  detail: {
+                    type: event.type,
+                    size: data.length,
+                    label: typeof event.label === 'string' ? event.label : undefined,
+                    toolName: typeof event.toolName === 'string' ? event.toolName : undefined,
+                  },
+                }));
+              }
+
               onEvent(event as SSEEvent);
-            } catch {
-              // Skip invalid JSON
+            } catch (err) {
+              console.warn('[SSE] Failed to parse event JSON', {
+                error: err instanceof Error ? err.message : String(err),
+                dataLength: data.length,
+                preview: data.slice(0, 200),
+              });
+              if (shouldDebugSSE && typeof window !== 'undefined') {
+                window.dispatchEvent(new CustomEvent('sparke:sse-parse-error', {
+                  detail: {
+                    error: err instanceof Error ? err.message : String(err),
+                    size: data.length,
+                    preview: data.slice(0, 200),
+                  },
+                }));
+              }
             }
           }
         }
@@ -272,6 +314,14 @@ function parseSSEStream(
   });
 }
 
+// Attachment type for runAgent
+export interface RunAgentAttachment {
+  type: 'image' | 'file';
+  data: string; // base64 data URL
+  mediaType?: string;
+  filename?: string;
+}
+
 // Streaming run with resumable stream support
 export function runAgent(
   sessionId: string,
@@ -279,14 +329,20 @@ export function runAgent(
   onEvent: (event: SSEEvent) => void,
   options?: {
     onStreamId?: (streamId: string) => void;
+    attachments?: RunAgentAttachment[];
   }
 ): () => void {
   const controller = new AbortController();
 
+  const body: { prompt: string; attachments?: RunAgentAttachment[] } = { prompt };
+  if (options?.attachments && options.attachments.length > 0) {
+    body.attachments = options.attachments;
+  }
+
   fetch(`${getApiBase()}/agents/${sessionId}/run`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ prompt }),
+    body: JSON.stringify(body),
     signal: controller.signal,
   })
     .then(async (response) => {
@@ -360,7 +416,7 @@ export type SSEEvent =
   | { type: 'tool-input-delta'; toolCallId: string; argsTextDelta: string }
   | { type: 'tool-input-available'; toolCallId: string; toolName: string; input: unknown }
   | { type: 'tool-output-available'; toolCallId: string; output: unknown }
-  | { type: 'tool-progress'; toolName: string; data: { terminalId: string; status: 'started' | 'running' | 'completed'; command?: string } }
+  | { type: 'tool-progress'; toolName: string; data: Record<string, unknown> }
   | { type: 'data-approval-required'; data: PendingApproval }
   | { type: 'data-stream-id'; streamId: string }
   | { type: 'data-session'; data: { id: string; name: string; workingDirectory: string; model: string } }
@@ -447,6 +503,25 @@ export function streamTerminal(
   return () => controller.abort();
 }
 
+// ============================================
+// Version Check
+// ============================================
+
+export interface VersionInfo {
+  packageName: string;
+  currentVersion: string;
+  latestVersion: string;
+  updateAvailable: boolean;
+  updateCommand: string | null;
+  error?: string;
+  timestamp: string;
+}
+
+export async function checkVersion(): Promise<VersionInfo> {
+  const res = await fetch(`${getApiBase()}/health/version`);
+  return res.json();
+}
+
 // ============================================
 // API Key Management
 // ============================================
@@ -566,3 +641,145 @@ export async function getSessionDiff(sessionId: string): Promise<SessionDiffResp
   }
   return res.json();
 }
+
+// ============================================
+// Attachments API
+// ============================================
+
+export interface Attachment {
+  id: string;
+  filename: string;
+  storedAs: string;
+  path: string;
+  size: number;
+  mediaType?: string;
+  sessionId: string;
+}
+
+export interface AttachmentsResponse {
+  sessionId: string;
+  attachments: Array<{
+    id: string;
+    filename: string;
+    path: string;
+    size: number;
+    createdAt: string;
+  }>;
+  count: number;
+}
+
+/**
+ * Upload an attachment for a session
+ * Accepts either a File object or base64 data
+ */
+export async function uploadAttachment(
+  sessionId: string, 
+  file: File
+): Promise<Attachment> {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const res = await fetch(`${getApiBase()}/sessions/${sessionId}/attachments`, {
+    method: 'POST',
+    body: formData,
+  });
+
+  if (!res.ok) {
+    const error = await res.json().catch(() => ({ error: 'Upload failed' }));
+    throw new Error(error.error || `Failed to upload: ${res.statusText}`);
+  }
+
+  return res.json();
+}
+
+/**
+ * Upload an attachment from a data URL (base64)
+ */
+export async function uploadAttachmentFromDataUrl(
+  sessionId: string,
+  filename: string,
+  dataUrl: string,
+  mediaType?: string
+): Promise<Attachment> {
+  const res = await fetch(`${getApiBase()}/sessions/${sessionId}/attachments`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      filename,
+      data: dataUrl,
+      mediaType,
+    }),
+  });
+
+  if (!res.ok) {
+    const error = await res.json().catch(() => ({ error: 'Upload failed' }));
+    throw new Error(error.error || `Failed to upload: ${res.statusText}`);
+  }
+
+  return res.json();
+}
+
+/**
+ * List attachments for a session
+ */
+export async function getSessionAttachments(sessionId: string): Promise<AttachmentsResponse> {
+  const res = await fetch(`${getApiBase()}/sessions/${sessionId}/attachments`);
+  if (!res.ok) {
+    throw new Error(`Failed to get attachments: ${res.statusText}`);
+  }
+  return res.json();
+}
+
+/**
+ * Delete an attachment
+ */
+export async function deleteAttachment(sessionId: string, attachmentId: string): Promise<void> {
+  const res = await fetch(`${getApiBase()}/sessions/${sessionId}/attachments/${attachmentId}`, {
+    method: 'DELETE',
+  });
+  if (!res.ok) {
+    throw new Error(`Failed to delete attachment: ${res.statusText}`);
+  }
+}
+
+// ============================================
+// Workspace Files API (for @ mentions)
+// ============================================
+
+export interface WorkspaceFile {
+  path: string;       // Relative path from working directory
+  name: string;       // File/folder name
+  type: 'file' | 'folder';
+  extension?: string; // For files only
+}
+
+export interface WorkspaceFilesResponse {
+  sessionId: string;
+  workingDirectory: string;
+  files: WorkspaceFile[];
+  count: number;
+  query?: string;
+  error?: string;
+}
+
+/**
+ * List workspace files for @ mentions
+ */
+export async function getWorkspaceFiles(
+  sessionId: string,
+  query?: string,
+  limit?: number
+): Promise<WorkspaceFilesResponse> {
+  const params = new URLSearchParams();
+  if (query) params.set('query', query);
+  if (limit) params.set('limit', String(limit));
+  
+  const url = `${getApiBase()}/sessions/${sessionId}/files${params.toString() ? '?' + params.toString() : ''}`;
+  const res = await fetch(url);
+  
+  if (!res.ok) {
+    throw new Error(`Failed to get workspace files: ${res.statusText}`);
+  }
+  
+  return res.json();
+}