claude-cortex 1.0.0 → 1.1.0

package/dashboard/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/dashboard/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/dashboard/src/hooks/useDebouncedValue.ts

@@ -0,0 +1,24 @@
+/**
+ * Debounce Hook
+ *
+ * Delays updating a value until after a specified delay has passed
+ * since the last time the value changed.
+ */
+
+import { useState, useEffect } from 'react';
+
+export function useDebouncedValue<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/dashboard/src/hooks/useMemories.ts

@@ -0,0 +1,276 @@
+'use client';
+
+/**
+ * Memory Data Hooks
+ * TanStack Query hooks for fetching memory data
+ *
+ * Uses WebSocket for real-time updates with polling as fallback.
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Memory, MemoryStats, MemoryLink } from '@/types/memory';
+import { useMemoryWebSocket } from '@/lib/websocket';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+// Pagination metadata from API
+export interface PaginationInfo {
+  offset: number;
+  limit: number;
+  total: number;
+  hasMore: boolean;
+}
+
+// Paginated response from API
+interface PaginatedMemoriesResponse {
+  memories: Memory[];
+  pagination: PaginationInfo;
+}
+
+// Fetch memories with pagination support
+async function fetchMemories(options?: {
+  project?: string;
+  type?: string;
+  category?: string;
+  limit?: number;
+  offset?: number;
+  mode?: 'recent' | 'important' | 'search';
+  query?: string;
+}): Promise<PaginatedMemoriesResponse> {
+  const params = new URLSearchParams();
+  if (options?.project) params.set('project', options.project);
+  if (options?.type) params.set('type', options.type);
+  if (options?.category) params.set('category', options.category);
+  if (options?.limit) params.set('limit', options.limit.toString());
+  if (options?.offset) params.set('offset', options.offset.toString());
+  if (options?.mode) params.set('mode', options.mode);
+  if (options?.query) params.set('query', options.query);
+
+  const response = await fetch(`${API_BASE}/api/memories?${params}`);
+  if (!response.ok) throw new Error('Failed to fetch memories');
+  return response.json();
+}
+
+// Fetch memory stats
+async function fetchStats(project?: string): Promise<MemoryStats> {
+  const params = project ? `?project=${project}` : '';
+  const response = await fetch(`${API_BASE}/api/stats${params}`);
+  if (!response.ok) throw new Error('Failed to fetch stats');
+  return response.json();
+}
+
+// Fetch memory links
+async function fetchLinks(project?: string): Promise<MemoryLink[]> {
+  const params = project ? `?project=${project}` : '';
+  const response = await fetch(`${API_BASE}/api/links${params}`);
+  if (!response.ok) throw new Error('Failed to fetch links');
+  return response.json();
+}
+
+// Project info from API
+export interface ProjectInfo {
+  project: string | null;
+  memory_count: number;
+  label: string;
+}
+
+// Fetch list of projects
+async function fetchProjects(): Promise<{ projects: ProjectInfo[] }> {
+  const response = await fetch(`${API_BASE}/api/projects`);
+  if (!response.ok) throw new Error('Failed to fetch projects');
+  return response.json();
+}
+
+// Access a memory (reinforce)
+async function accessMemory(id: number): Promise<Memory> {
+  const response = await fetch(`${API_BASE}/api/memories/${id}/access`, {
+    method: 'POST',
+  });
+  if (!response.ok) throw new Error('Failed to access memory');
+  return response.json();
+}
+
+// Trigger consolidation
+async function triggerConsolidation(): Promise<{
+  success: boolean;
+  consolidated: number;
+  decayed: number;
+  deleted: number;
+}> {
+  const response = await fetch(`${API_BASE}/api/consolidate`, {
+    method: 'POST',
+  });
+  if (!response.ok) throw new Error('Failed to consolidate');
+  return response.json();
+}
+
+// Hook: Get all memories with pagination
+// Polling is reduced because WebSocket handles real-time updates
+export function useMemories(options?: {
+  project?: string;
+  type?: string;
+  category?: string;
+  limit?: number;
+  offset?: number;
+  mode?: 'recent' | 'important' | 'search';
+  query?: string;
+}) {
+  const query = useQuery({
+    queryKey: ['memories', options],
+    queryFn: () => fetchMemories(options),
+    refetchInterval: 30000, // Fallback poll every 30 seconds (WebSocket handles real-time)
+  });
+
+  // Extract memories array and pagination from response
+  return {
+    ...query,
+    data: query.data?.memories,
+    pagination: query.data?.pagination,
+  };
+}
+
+// Hook: Get memory stats
+export function useStats(project?: string) {
+  return useQuery({
+    queryKey: ['stats', project],
+    queryFn: () => fetchStats(project),
+    refetchInterval: 30000, // Fallback poll every 30 seconds
+  });
+}
+
+// Hook: Get memory links
+export function useMemoryLinks(project?: string) {
+  return useQuery({
+    queryKey: ['links', project],
+    queryFn: () => fetchLinks(project),
+    refetchInterval: 60000, // Fallback poll every 60 seconds
+  });
+}
+
+// Hook: Get list of projects
+export function useProjects() {
+  return useQuery({
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+    refetchInterval: 60000, // Refresh project list every minute
+  });
+}
+
+// Hook: Combined memories with WebSocket real-time updates
+export function useMemoriesWithRealtime(options?: {
+  project?: string;
+  type?: string;
+  category?: string;
+  limit?: number;
+  offset?: number;
+  mode?: 'recent' | 'important' | 'search';
+  query?: string;
+}) {
+  // Connect to WebSocket for real-time updates
+  const ws = useMemoryWebSocket();
+
+  // Fetch memories with reduced polling (WebSocket handles most updates)
+  const memories = useMemories(options);
+
+  return {
+    ...memories,
+    isConnected: ws.isConnected,
+    lastEvent: ws.lastEvent,
+  };
+}
+
+// Hook: Access/reinforce a memory
+export function useAccessMemory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: accessMemory,
+    onSuccess: () => {
+      // Invalidate memories to trigger refetch
+      queryClient.invalidateQueries({ queryKey: ['memories'] });
+      queryClient.invalidateQueries({ queryKey: ['stats'] });
+    },
+  });
+}
+
+// Hook: Trigger consolidation
+export function useConsolidate() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: triggerConsolidation,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['memories'] });
+      queryClient.invalidateQueries({ queryKey: ['stats'] });
+    },
+  });
+}
+
+// ============================================
+// CONTROL API
+// ============================================
+
+// Control status response
+export interface ControlStatus {
+  paused: boolean;
+  uptime: number;
+  uptimeFormatted: string;
+}
+
+// Fetch control status
+async function fetchControlStatus(): Promise<ControlStatus> {
+  const response = await fetch(`${API_BASE}/api/control/status`);
+  if (!response.ok) throw new Error('Failed to fetch control status');
+  return response.json();
+}
+
+// Pause memory creation
+async function pauseMemoryCreation(): Promise<{ paused: boolean }> {
+  const response = await fetch(`${API_BASE}/api/control/pause`, {
+    method: 'POST',
+  });
+  if (!response.ok) throw new Error('Failed to pause');
+  return response.json();
+}
+
+// Resume memory creation
+async function resumeMemoryCreation(): Promise<{ paused: boolean }> {
+  const response = await fetch(`${API_BASE}/api/control/resume`, {
+    method: 'POST',
+  });
+  if (!response.ok) throw new Error('Failed to resume');
+  return response.json();
+}
+
+// Hook: Get control status
+export function useControlStatus() {
+  return useQuery({
+    queryKey: ['control-status'],
+    queryFn: fetchControlStatus,
+    refetchInterval: 10000, // Poll every 10 seconds for uptime updates
+  });
+}
+
+// Hook: Pause memory creation
+export function usePauseMemory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: pauseMemoryCreation,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['control-status'] });
+    },
+  });
+}
+
+// Hook: Resume memory creation
+export function useResumeMemory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: resumeMemoryCreation,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['control-status'] });
+    },
+  });
+}

package/dashboard/src/hooks/useSuggestions.ts

@@ -0,0 +1,46 @@
+/**
+ * Search Suggestions Hook
+ *
+ * Fetches autocomplete suggestions for the search input.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { useDebouncedValue } from './useDebouncedValue';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+interface Suggestion {
+  text: string;
+  type: 'title' | 'category' | 'project';
+  count: number;
+}
+
+async function fetchSuggestions(query: string): Promise<Suggestion[]> {
+  if (!query || query.length < 2) {
+    return [];
+  }
+
+  const response = await fetch(
+    `${API_URL}/api/suggestions?q=${encodeURIComponent(query)}&limit=8`
+  );
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch suggestions');
+  }
+
+  const data = await response.json();
+  return data.suggestions;
+}
+
+export function useSuggestions(query: string) {
+  // Debounce the query to avoid too many requests
+  const debouncedQuery = useDebouncedValue(query, 200);
+
+  return useQuery({
+    queryKey: ['suggestions', debouncedQuery],
+    queryFn: () => fetchSuggestions(debouncedQuery),
+    enabled: debouncedQuery.length >= 2,
+    staleTime: 30000, // Cache for 30 seconds
+    refetchOnWindowFocus: false,
+  });
+}

package/dashboard/src/lib/category-colors.ts

@@ -0,0 +1,84 @@
+/**
+ * Category Colors
+ * Visual color mappings for memory categories
+ *
+ * Includes both classic (cool blue/purple) and Jarvis (warm gold/orange) palettes
+ */
+
+import { MemoryCategory, MemoryType } from '@/types/memory';
+
+// Classic color palette (cool blues and purples)
+export const CATEGORY_COLORS: Record<MemoryCategory, string> = {
+  architecture: '#3B82F6',  // Blue
+  pattern: '#8B5CF6',       // Purple
+  preference: '#EC4899',    // Pink
+  error: '#EF4444',         // Red
+  context: '#10B981',       // Green
+  learning: '#F59E0B',      // Amber
+  todo: '#F97316',          // Orange
+  note: '#6B7280',          // Gray
+  relationship: '#06B6D4',  // Cyan
+  custom: '#A855F7',        // Violet
+};
+
+export const TYPE_COLORS: Record<MemoryType, string> = {
+  short_term: '#F97316',    // Orange
+  long_term: '#3B82F6',     // Blue
+  episodic: '#8B5CF6',      // Purple
+};
+
+// Jarvis color palette (warm gold/orange holographic style)
+export const JARVIS_CATEGORY_COLORS: Record<MemoryCategory, string> = {
+  architecture: '#FFD700',  // Bright gold
+  pattern: '#FFB347',       // Warm gold
+  preference: '#FFA500',    // Pure orange
+  error: '#FF6B6B',         // Keep red-ish for errors
+  context: '#FFC080',       // Soft peach
+  learning: '#FFE4B5',      // Moccasin
+  todo: '#FF8C00',          // Deep orange
+  note: '#FFCC66',          // Light amber
+  relationship: '#00D4FF',  // Cyan accent
+  custom: '#FFB347',        // Warm gold
+};
+
+export const JARVIS_TYPE_COLORS: Record<MemoryType, string> = {
+  short_term: '#FFD700',    // Bright gold (front)
+  episodic: '#FFB347',      // Warm gold (middle)
+  long_term: '#FF8C00',     // Deep orange (back)
+};
+
+// Color mode toggle - defaults to Jarvis mode
+let useJarvisColors = true;
+
+export function setUseJarvisColors(value: boolean): void {
+  useJarvisColors = value;
+}
+
+export function getUseJarvisColors(): boolean {
+  return useJarvisColors;
+}
+
+export function getCategoryColor(category: MemoryCategory): string {
+  if (useJarvisColors) {
+    return JARVIS_CATEGORY_COLORS[category] || JARVIS_CATEGORY_COLORS.custom;
+  }
+  return CATEGORY_COLORS[category] || CATEGORY_COLORS.custom;
+}
+
+export function getTypeColor(type: MemoryType): string {
+  if (useJarvisColors) {
+    return JARVIS_TYPE_COLORS[type] || JARVIS_TYPE_COLORS.short_term;
+  }
+  return TYPE_COLORS[type] || TYPE_COLORS.short_term;
+}
+
+export function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16) / 255,
+        g: parseInt(result[2], 16) / 255,
+        b: parseInt(result[3], 16) / 255,
+      }
+    : { r: 1, g: 1, b: 1 };
+}