@pennyfarthing/core 11.3.8 → 11.5.0-alpha.0

package/packages/core/src/public/components/ui/select.tsx

@@ -0,0 +1,157 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

package/packages/core/src/public/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

package/packages/core/src/public/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/packages/core/src/public/components/ui/toggle-group.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/packages/core/src/public/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package/packages/core/src/public/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/packages/core/src/public/contexts/ClaudeContext.tsx

@@ -0,0 +1,311 @@
+/**
+ * ClaudeContext
+ *
+ * React context for shared Claude WebSocket connection.
+ * Part of IPC-to-WebSocket migration (Phase 1).
+ *
+ * Provides a single WebSocket connection shared across all components
+ * that need to interact with Claude (MessagePanel, ControlBar, QuickActions).
+ */
+
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import type { PastedImage, ClaudeMessage, PermissionMode } from '../hooks/useClaude';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface WebSocketClaudeMessage {
+  type: 'message' | 'complete' | 'error' | 'init';
+  message?: ClaudeMessage;
+  error?: string;
+}
+
+type MessageCallback = (message: ClaudeMessage) => void;
+type CompleteCallback = () => void;
+type ErrorCallback = (error: string) => void;
+type ClearCallback = () => void;
+
+/** User message sent via send() - for display in MessagePanel */
+interface UserMessageData {
+  prompt: string;
+  images: PastedImage[];
+  timestamp: number;
+}
+type UserMessageCallback = (message: UserMessageData) => void;
+
+interface ClaudeContextValue {
+  /** Send a message to Claude */
+  send: (prompt: string, images?: PastedImage[]) => void;
+  /** Abort the current query */
+  abort: () => void;
+  /** Clear the session */
+  clear: () => void;
+  /** Clear session and reload agent (TirePump) */
+  clearAndReload: (agent: string) => void;
+  /** Set permission mode */
+  setMode: (mode: PermissionMode) => void;
+  /** Whether WebSocket is connected */
+  isConnected: boolean;
+  /** Current permission mode */
+  mode: PermissionMode;
+  /** Subscribe to messages */
+  onMessage: (callback: MessageCallback) => () => void;
+  /** Subscribe to completion */
+  onComplete: (callback: CompleteCallback) => () => void;
+  /** Subscribe to errors */
+  onError: (callback: ErrorCallback) => () => void;
+  /** Subscribe to user messages sent via send() - for display in MessagePanel */
+  onUserMessage: (callback: UserMessageCallback) => () => void;
+  /** Subscribe to clear/reset events */
+  onClear: (callback: ClearCallback) => () => void;
+}
+
+// =============================================================================
+// Context
+// =============================================================================
+
+const ClaudeContext = createContext<ClaudeContextValue | null>(null);
+
+// =============================================================================
+// Provider
+// =============================================================================
+
+interface ClaudeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ClaudeProvider({ children }: ClaudeProviderProps): React.ReactElement {
+  const [isConnected, setIsConnected] = useState(false);
+  const [mode, setModeState] = useState<PermissionMode>('default');
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // Subscriber lists
+  const messageCallbacksRef = useRef<Set<MessageCallback>>(new Set());
+  const completeCallbacksRef = useRef<Set<CompleteCallback>>(new Set());
+  const errorCallbacksRef = useRef<Set<ErrorCallback>>(new Set());
+  const userMessageCallbacksRef = useRef<Set<UserMessageCallback>>(new Set());
+  const clearCallbacksRef = useRef<Set<ClearCallback>>(new Set());
+
+  // Connect to WebSocket
+  const connect = useCallback(() => {
+    // Build WebSocket URL
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = window.location.host;
+    const wsUrl = `${protocol}//${host}/ws/claude`;
+
+    console.log('[ClaudeContext] Connecting to', wsUrl);
+
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      console.log('[ClaudeContext] Connected');
+      setIsConnected(true);
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as WebSocketClaudeMessage;
+
+        switch (data.type) {
+          case 'message':
+            if (data.message) {
+              messageCallbacksRef.current.forEach(cb => cb(data.message!));
+            }
+            break;
+
+          case 'complete':
+            completeCallbacksRef.current.forEach(cb => cb());
+            break;
+
+          case 'error':
+            if (data.error) {
+              errorCallbacksRef.current.forEach(cb => cb(data.error!));
+            }
+            break;
+
+          case 'init':
+            console.log('[ClaudeContext] Init received');
+            break;
+        }
+      } catch (err) {
+        console.error('[ClaudeContext] Failed to parse message:', err);
+      }
+    };
+
+    ws.onclose = () => {
+      console.log('[ClaudeContext] Disconnected');
+      setIsConnected(false);
+      wsRef.current = null;
+
+      // Attempt reconnection after delay
+      reconnectTimeoutRef.current = setTimeout(() => {
+        console.log('[ClaudeContext] Attempting reconnect...');
+        connect();
+      }, 2000);
+    };
+
+    ws.onerror = (error) => {
+      console.error('[ClaudeContext] WebSocket error:', error);
+    };
+  }, []);
+
+  // Initialize connection
+  useEffect(() => {
+    connect();
+
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [connect]);
+
+  // Send message
+  const send = useCallback((prompt: string, images?: PastedImage[]) => {
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+      console.error('[ClaudeContext] Cannot send: not connected');
+      errorCallbacksRef.current.forEach(cb => cb('Not connected to Claude service'));
+      return;
+    }
+
+    // Notify subscribers that a user message was sent (for display in MessagePanel)
+    const userMessage: UserMessageData = {
+      prompt,
+      images: images || [],
+      timestamp: Date.now(),
+    };
+    userMessageCallbacksRef.current.forEach(cb => cb(userMessage));
+
+    wsRef.current.send(JSON.stringify({
+      type: 'send',
+      prompt,
+      images,
+    }));
+  }, []);
+
+  // Abort query
+  const abort = useCallback(() => {
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+      console.warn('[ClaudeContext] Cannot abort: not connected');
+      return;
+    }
+
+    wsRef.current.send(JSON.stringify({ type: 'abort' }));
+  }, []);
+
+  // Clear session
+  const clear = useCallback(() => {
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+      console.warn('[ClaudeContext] Cannot clear: not connected');
+      return;
+    }
+
+    wsRef.current.send(JSON.stringify({ type: 'clear' }));
+    clearCallbacksRef.current.forEach(cb => cb());
+  }, []);
+
+  // Clear session and reload agent (TirePump)
+  const clearAndReload = useCallback((agent: string) => {
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+      console.warn('[ClaudeContext] Cannot clearAndReload: not connected');
+      return;
+    }
+
+    console.log('[ClaudeContext] TirePump: clearAndReload agent:', agent);
+    wsRef.current.send(JSON.stringify({ type: 'clearAndReload', agent }));
+    clearCallbacksRef.current.forEach(cb => cb());
+  }, []);
+
+  // Set permission mode
+  const setMode = useCallback((newMode: PermissionMode) => {
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+      console.warn('[ClaudeContext] Cannot set mode: not connected');
+      return;
+    }
+
+    wsRef.current.send(JSON.stringify({ type: 'setMode', mode: newMode }));
+    setModeState(newMode);
+  }, []);
+
+  // Subscribe to messages
+  const onMessage = useCallback((callback: MessageCallback) => {
+    messageCallbacksRef.current.add(callback);
+    return () => {
+      messageCallbacksRef.current.delete(callback);
+    };
+  }, []);
+
+  // Subscribe to completion
+  const onComplete = useCallback((callback: CompleteCallback) => {
+    completeCallbacksRef.current.add(callback);
+    return () => {
+      completeCallbacksRef.current.delete(callback);
+    };
+  }, []);
+
+  // Subscribe to errors
+  const onError = useCallback((callback: ErrorCallback) => {
+    errorCallbacksRef.current.add(callback);
+    return () => {
+      errorCallbacksRef.current.delete(callback);
+    };
+  }, []);
+
+  // Subscribe to user messages sent via send()
+  const onUserMessage = useCallback((callback: UserMessageCallback) => {
+    userMessageCallbacksRef.current.add(callback);
+    return () => {
+      userMessageCallbacksRef.current.delete(callback);
+    };
+  }, []);
+
+  // Subscribe to clear/reset events
+  const onClear = useCallback((callback: ClearCallback) => {
+    clearCallbacksRef.current.add(callback);
+    return () => {
+      clearCallbacksRef.current.delete(callback);
+    };
+  }, []);
+
+  const value = useMemo(() => ({
+    send,
+    abort,
+    clear,
+    clearAndReload,
+    setMode,
+    isConnected,
+    mode,
+    onMessage,
+    onComplete,
+    onError,
+    onUserMessage,
+    onClear,
+  }), [send, abort, clear, clearAndReload, setMode, isConnected, mode, onMessage, onComplete, onError, onUserMessage, onClear]);
+
+  return (
+    <ClaudeContext.Provider value={value}>
+      {children}
+    </ClaudeContext.Provider>
+  );
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+export function useClaudeContext(): ClaudeContextValue {
+  const context = useContext(ClaudeContext);
+  if (!context) {
+    throw new Error('useClaudeContext must be used within a ClaudeProvider');
+  }
+  return context;
+}
+
+export default ClaudeContext;