From fcb258ac2d702b9f87619115a9a9150460d3c585 Mon Sep 17 00:00:00 2001 From: rcourtman Date: Fri, 5 Dec 2025 12:14:00 +0000 Subject: [PATCH] wip: AI provider improvements and chat store enhancements - Improve Anthropic provider error handling - Add AI service enhancements - Update AI chat store with additional state management --- frontend-modern/PLAN-column-visibility.md | 302 +++++++++++++++++++ frontend-modern/src/components/AI/AIChat.tsx | 7 +- frontend-modern/src/stores/aiChat.ts | 17 ++ internal/ai/providers/anthropic.go | 56 +++- internal/ai/providers/provider.go | 8 +- internal/ai/service.go | 97 +++++- 6 files changed, 465 insertions(+), 22 deletions(-) create mode 100644 frontend-modern/PLAN-column-visibility.md diff --git a/frontend-modern/PLAN-column-visibility.md b/frontend-modern/PLAN-column-visibility.md new file mode 100644 index 0000000..78510e8 --- /dev/null +++ b/frontend-modern/PLAN-column-visibility.md @@ -0,0 +1,302 @@ +# Plan: Toggleable Table Columns + +## Problem +The current drawer pattern hides useful information (IPs, OS, backup status, node, tags) that users need to click to reveal. This goes against Pulse's core philosophy of dense, scannable, comparable data at a glance. + +## Goal +Replace drawer-hidden info with optional table columns that: +1. Show data inline for easy comparison across rows +2. Are toggleable by the user (show/hide) +3. Auto-show based on available horizontal space +4. Persist user preferences + +## Current State + +### Infrastructure Already Exists +- `ColumnPriority` system: `'essential' | 'primary' | 'secondary' | 'supplementary' | 'detailed'` +- `PRIORITY_BREAKPOINTS` maps priorities to responsive breakpoints +- `usePersistentSignal` for localStorage persistence +- `STANDARD_COLUMNS` with predefined column configs +- `useBreakpoint` hook for responsive behavior + +### Current Columns (Dashboard/Proxmox) +All marked `essential` (always visible): +- Name, Type, VMID, Uptime +- CPU, Memory, Disk (progress bars) +- Disk Read, Disk Write, Net In, Net Out + +### Data Available but Hidden in Drawer +- IP addresses (`guest.ipAddresses`) +- OS name/version (`guest.osName`, `guest.osVersion`) +- Node (`guest.node`) +- Backup status (`guest.lastBackup`) +- Tags (`guest.tags`) +- CPUs allocated (`guest.cpus`) +- Agent version (`guest.agentVersion`) + +## Implementation + +### Phase 1: Add New Column Definitions + +Update `GUEST_COLUMNS` in `GuestRow.tsx`: + +```typescript +export const GUEST_COLUMNS: ColumnDef[] = [ + // Essential - always visible + { id: 'name', label: 'Name', priority: 'essential' }, + { id: 'type', label: 'Type', priority: 'essential' }, + { id: 'vmid', label: 'VMID', priority: 'essential' }, + + // Primary - visible on sm+ (640px) + { id: 'cpu', label: 'CPU', priority: 'essential', minWidth: '55px', maxWidth: '156px' }, + { id: 'memory', label: 'Memory', priority: 'essential', minWidth: '75px', maxWidth: '156px' }, + { id: 'disk', label: 'Disk', priority: 'essential', minWidth: '75px', maxWidth: '156px' }, + + // Secondary - visible on md+ (768px), user toggleable + { id: 'ip', label: 'IP', priority: 'secondary', toggleable: true }, + { id: 'uptime', label: 'Uptime', priority: 'secondary', toggleable: true }, + { id: 'node', label: 'Node', priority: 'secondary', toggleable: true }, + + // Supplementary - visible on lg+ (1024px), user toggleable + { id: 'backup', label: 'Backup', priority: 'supplementary', toggleable: true }, + { id: 'os', label: 'OS', priority: 'supplementary', toggleable: true }, + { id: 'tags', label: 'Tags', priority: 'supplementary', toggleable: true }, + + // Detailed - visible on xl+ (1280px), user toggleable + { id: 'diskRead', label: 'D Read', priority: 'detailed', toggleable: true }, + { id: 'diskWrite', label: 'D Write', priority: 'detailed', toggleable: true }, + { id: 'netIn', label: 'Net In', priority: 'detailed', toggleable: true }, + { id: 'netOut', label: 'Net Out', priority: 'detailed', toggleable: true }, +]; +``` + +### Phase 2: Column Visibility State + +Create a hook for managing column visibility: + +```typescript +// hooks/useColumnVisibility.ts +export function useColumnVisibility( + storageKey: string, + columns: ColumnDef[] +) { + // Get toggleable columns + const toggleableIds = columns.filter(c => c.toggleable).map(c => c.id); + + // Default: all toggleable columns visible + const defaultVisible = new Set(toggleableIds); + + // Persist to localStorage + const [hiddenColumns, setHiddenColumns] = usePersistentSignal>( + storageKey, + new Set(), + { + serialize: (set) => JSON.stringify([...set]), + deserialize: (str) => new Set(JSON.parse(str)), + } + ); + + const isVisible = (id: string) => !hiddenColumns().has(id); + const toggle = (id: string) => { + const hidden = new Set(hiddenColumns()); + if (hidden.has(id)) { + hidden.delete(id); + } else { + hidden.add(id); + } + setHiddenColumns(hidden); + }; + + return { isVisible, toggle, hiddenColumns, toggleableIds }; +} +``` + +### Phase 3: Column Picker UI + +Add a column picker dropdown to the filter bar: + +```typescript +// components/shared/ColumnPicker.tsx +
+ + + +
+ + {(col) => ( + + )} + +
+ +
+``` + +### Phase 4: Render New Column Cells + +Add cell renderers in `GuestRow.tsx`: + +```typescript +// IP column + + + + + {guest.ipAddresses?.[0]} + {guest.ipAddresses?.length > 1 && ` +${guest.ipAddresses.length - 1}`} + + + + + +// Backup column + + + + + + +// Node column + + + {guest.node} + + + +// OS column + + + + {guest.osName || '—'} + + + + +// Tags column + + + + + +``` + +### Phase 5: Update Table Header + +Dynamically render headers based on visible columns: + +```typescript + + + + {(col) => ( + col.sortable && handleSort(col.id)} + > + {col.label} + + + + + )} + + + +``` + +### Phase 6: Responsive Behavior + +Combine user preferences with breakpoint-based visibility: + +```typescript +const visibleColumns = createMemo(() => { + const breakpoint = useBreakpoint(); + + return GUEST_COLUMNS.filter(col => { + // Always show essential columns + if (col.priority === 'essential') return true; + + // Check if breakpoint supports this priority + const minBreakpoint = PRIORITY_BREAKPOINTS[col.priority]; + const hasSpace = breakpointIndex(breakpoint()) >= breakpointIndex(minBreakpoint); + + // If toggleable, also check user preference + if (col.toggleable) { + return hasSpace && isVisible(col.id); + } + + return hasSpace; + }); +}); +``` + +## Files to Modify + +1. **`src/components/Dashboard/GuestRow.tsx`** + - Expand `GUEST_COLUMNS` with new columns + - Add cell renderers for IP, backup, node, OS, tags + - Accept `visibleColumns` prop + +2. **`src/components/Dashboard/Dashboard.tsx`** + - Import and use column visibility hook + - Pass visible columns to header and rows + +3. **`src/components/Dashboard/DashboardFilter.tsx`** + - Add ColumnPicker component + +4. **`src/hooks/useColumnVisibility.ts`** (new) + - Create the column visibility management hook + +5. **`src/components/shared/ColumnPicker.tsx`** (new) + - Create the column picker dropdown component + +6. **`src/utils/localStorage.ts`** + - Add `DASHBOARD_COLUMN_VISIBILITY` storage key + +7. **Repeat for Hosts and Docker tabs** + - Similar changes to `HostsOverview.tsx` + - Similar changes to `DockerUnifiedTable.tsx` + +## What Happens to Drawers? + +After columns are implemented: +- **Keep drawers** but make them optional/minimal +- Drawer becomes a place for: + - AI Context annotations (already there) + - Very detailed info (full filesystem list, all network interfaces) + - Actions (future: start/stop/migrate buttons) +- Or **remove drawers entirely** if columns cover everything needed + +## Migration Path + +1. Implement columns first (Phase 1-6) +2. Test with real data +3. Decide what remains valuable in drawers +4. Either slim down drawers or remove them + +## Estimated Scope + +- New hook: ~50 lines +- ColumnPicker component: ~80 lines +- GuestRow changes: ~150 lines (new cells) +- Dashboard changes: ~30 lines (wiring) +- Header changes: ~40 lines +- Repeat for Hosts: ~200 lines +- Repeat for Docker: ~200 lines + +**Total: ~750 lines of new/modified code** diff --git a/frontend-modern/src/components/AI/AIChat.tsx b/frontend-modern/src/components/AI/AIChat.tsx index 4a7f1b6..302e1d2 100644 --- a/frontend-modern/src/components/AI/AIChat.tsx +++ b/frontend-modern/src/components/AI/AIChat.tsx @@ -229,10 +229,13 @@ export const AIChat: Component = (props) => { } }); - // Focus input when drawer opens + // Focus input when drawer opens and register with store for keyboard shortcuts createEffect(() => { if (isOpen() && inputRef) { setTimeout(() => inputRef?.focus(), 100); + aiChatStore.registerInput(inputRef); + } else { + aiChatStore.registerInput(null); } }); @@ -282,7 +285,7 @@ export const AIChat: Component = (props) => { // For assistant messages, prepend tool call outputs so AI has full context if (m.role === 'assistant' && m.toolCalls && m.toolCalls.length > 0) { const toolSummary = m.toolCalls - .map((tc) => `[Executed: ${tc.input}]\n${tc.output}`) + .map((tc) => `Command: ${tc.input}\nOutput: ${tc.output}`) .join('\n\n'); content = toolSummary + (content ? '\n\n' + content : ''); } diff --git a/frontend-modern/src/stores/aiChat.ts b/frontend-modern/src/stores/aiChat.ts index ac29b22..c60a89b 100644 --- a/frontend-modern/src/stores/aiChat.ts +++ b/frontend-modern/src/stores/aiChat.ts @@ -39,6 +39,9 @@ const [contextItems, setContextItems] = createSignal([]); const [messages, setMessages] = createSignal([]); const [aiEnabled, setAiEnabled] = createSignal(null); // null = not checked yet +// Store reference to AI input for focusing from keyboard shortcuts +let aiInputRef: HTMLTextAreaElement | null = null; + export const aiChatStore = { // Check if chat is open get isOpen() { @@ -189,4 +192,18 @@ export const aiChatStore = { }); setIsAIChatOpen(true); }, + + // Register the AI input element (called by AIChat component) + registerInput(ref: HTMLTextAreaElement | null) { + aiInputRef = ref; + }, + + // Focus the AI input (called by keyboard handlers) + focusInput() { + if (aiInputRef && isAIChatOpen()) { + aiInputRef.focus(); + return true; + } + return false; + }, }; diff --git a/internal/ai/providers/anthropic.go b/internal/ai/providers/anthropic.go index a5d1971..f3b8c74 100644 --- a/internal/ai/providers/anthropic.go +++ b/internal/ai/providers/anthropic.go @@ -57,10 +57,13 @@ type anthropicMessage struct { Content interface{} `json:"content"` // Can be string or []anthropicContent } +// anthropicTool represents a regular function tool type anthropicTool struct { + Type string `json:"type,omitempty"` // "web_search_20250305" for web search, omit for regular tools Name string `json:"name"` - Description string `json:"description"` - InputSchema map[string]interface{} `json:"input_schema"` + Description string `json:"description,omitempty"` // Not used for web search + InputSchema map[string]interface{} `json:"input_schema,omitempty"` // Not used for web search + MaxUses int `json:"max_uses,omitempty"` // For web search: limit searches per request } // anthropicResponse is the response from the Anthropic API @@ -76,14 +79,14 @@ type anthropicResponse struct { } type anthropicContent struct { - Type string `json:"type"` // "text" or "tool_use" or "tool_result" - Text string `json:"text,omitempty"` - ID string `json:"id,omitempty"` // For tool_use - Name string `json:"name,omitempty"` // For tool_use - Input map[string]interface{} `json:"input,omitempty"` // For tool_use - ToolUseID string `json:"tool_use_id,omitempty"` // For tool_result - Content string `json:"content,omitempty"` // For tool_result (when it's a string) - IsError bool `json:"is_error,omitempty"` // For tool_result + Type string `json:"type"` // "text", "tool_use", "tool_result", "server_tool_use", "web_search_tool_result" + Text string `json:"text,omitempty"` + ID string `json:"id,omitempty"` // For tool_use + Name string `json:"name,omitempty"` // For tool_use + Input map[string]interface{} `json:"input,omitempty"` // For tool_use + ToolUseID string `json:"tool_use_id,omitempty"` // For tool_result + Content json.RawMessage `json:"content,omitempty"` // Can be string or array (for web_search_tool_result) + IsError bool `json:"is_error,omitempty"` // For tool_result } type anthropicUsage struct { @@ -113,14 +116,15 @@ func (c *AnthropicClient) Chat(ctx context.Context, req ChatRequest) (*ChatRespo // Handle tool results specially if m.ToolResult != nil { - // Tool result message + // Tool result message - Content needs to be JSON-encoded string + contentJSON, _ := json.Marshal(m.ToolResult.Content) messages = append(messages, anthropicMessage{ Role: "user", Content: []anthropicContent{ { Type: "tool_result", ToolUseID: m.ToolResult.ToolUseID, - Content: m.ToolResult.Content, + Content: contentJSON, IsError: m.ToolResult.IsError, }, }, @@ -186,10 +190,20 @@ func (c *AnthropicClient) Chat(ctx context.Context, req ChatRequest) (*ChatRespo if len(req.Tools) > 0 { anthropicReq.Tools = make([]anthropicTool, len(req.Tools)) for i, t := range req.Tools { - anthropicReq.Tools[i] = anthropicTool{ - Name: t.Name, - Description: t.Description, - InputSchema: t.InputSchema, + if t.Type == "web_search_20250305" { + // Web search tool has a special format + anthropicReq.Tools[i] = anthropicTool{ + Type: t.Type, + Name: t.Name, + MaxUses: t.MaxUses, + } + } else { + // Regular function tool + anthropicReq.Tools[i] = anthropicTool{ + Name: t.Name, + Description: t.Description, + InputSchema: t.InputSchema, + } } } } @@ -284,11 +298,21 @@ func (c *AnthropicClient) Chat(ctx context.Context, req ChatRequest) (*ChatRespo case "text": textContent += c.Text case "tool_use": + // Regular tool use - we need to execute these toolCalls = append(toolCalls, ToolCall{ ID: c.ID, Name: c.Name, Input: c.Input, }) + case "server_tool_use": + // Server-side tool (like web_search) - Anthropic handles these automatically + // We just log it for debugging, no action needed + log.Debug(). + Str("tool_name", c.Name). + Msg("Server tool use detected (handled by Anthropic)") + case "web_search_tool_result": + // Results from web search - already incorporated into Claude's response + log.Debug().Msg("Web search results received") } } diff --git a/internal/ai/providers/provider.go b/internal/ai/providers/provider.go index a64af1f..c858bf1 100644 --- a/internal/ai/providers/provider.go +++ b/internal/ai/providers/provider.go @@ -29,9 +29,11 @@ type ToolResult struct { // Tool represents an AI tool definition type Tool struct { - Name string `json:"name"` - Description string `json:"description"` - InputSchema map[string]interface{} `json:"input_schema"` + Type string `json:"type,omitempty"` // "web_search_20250305" for web search, empty for regular tools + Name string `json:"name"` + Description string `json:"description,omitempty"` + InputSchema map[string]interface{} `json:"input_schema,omitempty"` + MaxUses int `json:"max_uses,omitempty"` // For web search: limit searches per request } // ChatRequest represents a request to the AI provider diff --git a/internal/ai/service.go b/internal/ai/service.go index f1f0964..882f4a5 100644 --- a/internal/ai/service.go +++ b/internal/ai/service.go @@ -3,10 +3,13 @@ package ai import ( "context" "fmt" + "io" + "net/http" "regexp" "strconv" "strings" "sync" + "time" "github.com/google/uuid" "github.com/rcourtman/pulse-go-rewrite/internal/agentexec" @@ -705,6 +708,9 @@ func (s *Service) getToolInputDisplay(tc providers.ToolCall) string { case "read_file": path, _ := tc.Input["path"].(string) return path + case "fetch_url": + url, _ := tc.Input["url"].(string) + return url default: return fmt.Sprintf("%v", tc.Input) } @@ -724,7 +730,7 @@ func (s *Service) hasAgentForTarget(req ExecuteRequest) bool { // getTools returns the available tools for AI func (s *Service) getTools() []providers.Tool { - return []providers.Tool{ + tools := []providers.Tool{ { Name: "run_command", Description: "Execute a shell command. By default runs on the current target, but you can override to run on the Proxmox host for operations like resizing disks, managing containers, etc.", @@ -757,7 +763,32 @@ func (s *Service) getTools() []providers.Tool { "required": []string{"path"}, }, }, + { + Name: "fetch_url", + Description: "Fetch content from a URL. Use this to check if web services are responding, read API endpoints, or fetch documentation. Works with local network URLs and public sites.", + InputSchema: map[string]interface{}{ + "type": "object", + "properties": map[string]interface{}{ + "url": map[string]interface{}{ + "type": "string", + "description": "The URL to fetch (e.g., 'http://192.168.1.50:8080/api/health' or 'https://example.com/docs')", + }, + }, + "required": []string{"url"}, + }, + }, } + + // Add web search tool for Anthropic provider + if s.provider != nil && s.provider.Name() == "anthropic" { + tools = append(tools, providers.Tool{ + Type: "web_search_20250305", + Name: "web_search", + MaxUses: 3, // Limit searches per request to control costs + }) + } + + return tools } // executeTool executes a tool call and returns the result @@ -835,12 +866,76 @@ func (s *Service) executeTool(ctx context.Context, req ExecuteRequest, tc provid execution.Success = true return result, execution + case "fetch_url": + urlStr, _ := tc.Input["url"].(string) + execution.Input = urlStr + + if urlStr == "" { + execution.Output = "Error: url is required" + return execution.Output, execution + } + + // Fetch the URL + result, err := s.fetchURL(ctx, urlStr) + if err != nil { + execution.Output = fmt.Sprintf("Error fetching URL: %s", err) + return execution.Output, execution + } + + execution.Output = result + execution.Success = true + return result, execution + default: execution.Output = fmt.Sprintf("Unknown tool: %s", tc.Name) return execution.Output, execution } } +// fetchURL fetches content from a URL with size limits and timeout +func (s *Service) fetchURL(ctx context.Context, urlStr string) (string, error) { + // Create HTTP client with timeout + client := &http.Client{ + Timeout: 30 * time.Second, + } + + // Create request with context + req, err := http.NewRequestWithContext(ctx, "GET", urlStr, nil) + if err != nil { + return "", fmt.Errorf("invalid URL: %w", err) + } + + // Set a reasonable user agent + req.Header.Set("User-Agent", "Pulse-AI/1.0") + + // Make the request + resp, err := client.Do(req) + if err != nil { + return "", fmt.Errorf("request failed: %w", err) + } + defer resp.Body.Close() + + // Read response with size limit (64KB) + const maxSize = 64 * 1024 + limitedReader := io.LimitReader(resp.Body, maxSize) + body, err := io.ReadAll(limitedReader) + if err != nil { + return "", fmt.Errorf("failed to read response: %w", err) + } + + // Build result with status info + result := fmt.Sprintf("HTTP %d %s\n", resp.StatusCode, resp.Status) + result += fmt.Sprintf("Content-Type: %s\n", resp.Header.Get("Content-Type")) + result += fmt.Sprintf("Content-Length: %d bytes\n\n", len(body)) + result += string(body) + + if len(body) == maxSize { + result += "\n\n[Response truncated at 64KB]" + } + + return result, nil +} + // executeOnAgent executes a command via the agent WebSocket func (s *Service) executeOnAgent(ctx context.Context, req ExecuteRequest, command string) (string, error) { if s.agentServer == nil {