@hienlh/ppm 0.1.0

package/src/web/components/ui/scroll-area.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 [&>div]:!block"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

package/src/web/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/web/components/ui/sonner.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/web/components/ui/tabs.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/web/components/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/web/hooks/use-chat.ts

@@ -0,0 +1,420 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { useWebSocket } from "./use-websocket";
+import { getAuthToken, projectUrl } from "@/lib/api-client";
+import type { ChatMessage, ChatEvent, UsageInfo } from "../../types/chat";
+import type { ChatWsServerMessage } from "../../types/api";
+
+interface ApprovalRequest {
+  requestId: string;
+  tool: string;
+  input: unknown;
+}
+
+interface UseChatReturn {
+  messages: ChatMessage[];
+  messagesLoading: boolean;
+  isStreaming: boolean;
+  pendingApproval: ApprovalRequest | null;
+  usageInfo: UsageInfo;
+  usageLoading: boolean;
+  sendMessage: (content: string) => void;
+  respondToApproval: (requestId: string, approved: boolean, data?: unknown) => void;
+  cancelStreaming: () => void;
+  refreshUsage: () => void;
+  isConnected: boolean;
+}
+
+export function useChat(sessionId: string | null, providerId = "claude-sdk", projectName = ""): UseChatReturn {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [messagesLoading, setMessagesLoading] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [pendingApproval, setPendingApproval] = useState<ApprovalRequest | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [usageInfo, setUsageInfo] = useState<UsageInfo>({});
+  const [usageLoading, setUsageLoading] = useState(false);
+  const streamingContentRef = useRef("");
+  const streamingEventsRef = useRef<ChatEvent[]>([]);
+  const isStreamingRef = useRef(false);
+  const pendingMessageRef = useRef<string | null>(null);
+  const sendRef = useRef<(data: string) => void>(() => {});
+
+  const handleMessage = useCallback((event: MessageEvent) => {
+    let data: ChatWsServerMessage;
+    try {
+      data = JSON.parse(event.data as string) as ChatWsServerMessage;
+    } catch {
+      return;
+    }
+
+    // Handle connected event (custom, not in type)
+    if ((data as any).type === "connected") {
+      setIsConnected(true);
+      return;
+    }
+
+    switch (data.type) {
+      case "text": {
+        streamingContentRef.current += data.content;
+        streamingEventsRef.current.push(data);
+        // Snapshot BEFORE queueing setState — React 18 batching may delay updater execution
+        const txtContent = streamingContentRef.current;
+        const txtEvents = [...streamingEventsRef.current];
+        setMessages((prev) => {
+          const last = prev[prev.length - 1];
+          if (last?.role === "assistant" && !last.id.startsWith("final-")) {
+            return [
+              ...prev.slice(0, -1),
+              { ...last, content: txtContent, events: txtEvents },
+            ];
+          }
+          return [
+            ...prev,
+            {
+              id: `streaming-${Date.now()}`,
+              role: "assistant" as const,
+              content: txtContent,
+              events: txtEvents,
+              timestamp: new Date().toISOString(),
+            },
+          ];
+        });
+        break;
+      }
+
+      case "tool_use": {
+        streamingEventsRef.current.push(data);
+        const tuContent = streamingContentRef.current;
+        const tuEvents = [...streamingEventsRef.current];
+        setMessages((prev) => {
+          const last = prev[prev.length - 1];
+          if (last?.role === "assistant") {
+            return [
+              ...prev.slice(0, -1),
+              { ...last, events: tuEvents },
+            ];
+          }
+          return [
+            ...prev,
+            {
+              id: `streaming-${Date.now()}`,
+              role: "assistant" as const,
+              content: tuContent,
+              events: tuEvents,
+              timestamp: new Date().toISOString(),
+            },
+          ];
+        });
+        break;
+      }
+
+      case "tool_result": {
+        streamingEventsRef.current.push(data);
+        const trEvents = [...streamingEventsRef.current];
+        setMessages((prev) => {
+          const last = prev[prev.length - 1];
+          if (last?.role === "assistant") {
+            return [
+              ...prev.slice(0, -1),
+              { ...last, events: trEvents },
+            ];
+          }
+          return prev;
+        });
+        break;
+      }
+
+      case "approval_request": {
+        streamingEventsRef.current.push(data);
+        setPendingApproval({
+          requestId: data.requestId,
+          tool: data.tool,
+          input: data.input,
+        });
+        break;
+      }
+
+      case "usage": {
+        // Merge usage info — accumulate totalCostUsd, track queryCostUsd
+        setUsageInfo((prev) => {
+          const next = { ...prev, ...data.usage };
+          if (data.usage.totalCostUsd != null) {
+            next.queryCostUsd = data.usage.totalCostUsd;
+            next.totalCostUsd = (prev.totalCostUsd ?? 0) + data.usage.totalCostUsd;
+          }
+          return next;
+        });
+        break;
+      }
+
+      case "error": {
+        streamingEventsRef.current.push(data);
+        const errEvents = [...streamingEventsRef.current];
+        setMessages((prev) => {
+          const last = prev[prev.length - 1];
+          if (last?.role === "assistant") {
+            return [
+              ...prev.slice(0, -1),
+              { ...last, events: errEvents },
+            ];
+          }
+          return [
+            ...prev,
+            {
+              id: `error-${Date.now()}`,
+              role: "system" as const,
+              content: data.message,
+              events: [data],
+              timestamp: new Date().toISOString(),
+            },
+          ];
+        });
+        isStreamingRef.current = false;
+        setIsStreaming(false);
+        break;
+      }
+
+      case "done": {
+        // Finalize the streaming message — capture refs before clearing
+        const finalContent = streamingContentRef.current;
+        const finalEvents = [...streamingEventsRef.current];
+        setMessages((prev) => {
+          const last = prev[prev.length - 1];
+          if (last?.role === "assistant") {
+            return [
+              ...prev.slice(0, -1),
+              {
+                ...last,
+                id: `final-${Date.now()}`,
+                content: finalContent || last.content,
+                events: finalEvents.length > 0 ? finalEvents : last.events,
+              },
+            ];
+          }
+          return prev;
+        });
+        streamingContentRef.current = "";
+        streamingEventsRef.current = [];
+
+        // Flush queued message if user typed while streaming
+        const queued = pendingMessageRef.current;
+        if (queued) {
+          pendingMessageRef.current = null;
+          // Add user message to list
+          setMessages((prev2) => [
+            ...prev2,
+            {
+              id: `user-${Date.now()}`,
+              role: "user" as const,
+              content: queued,
+              timestamp: new Date().toISOString(),
+            },
+          ]);
+          streamingContentRef.current = "";
+          streamingEventsRef.current = [];
+          isStreamingRef.current = true;
+          setIsStreaming(true);
+          sendRef.current(JSON.stringify({ type: "message", content: queued }));
+        } else {
+          isStreamingRef.current = false;
+          setIsStreaming(false);
+        }
+        break;
+      }
+    }
+  }, []);
+
+  const wsUrl = sessionId && projectName
+    ? `/ws/project/${encodeURIComponent(projectName)}/chat/${sessionId}`
+    : "";
+
+  const { send } = useWebSocket({
+    url: wsUrl,
+    onMessage: handleMessage,
+    autoConnect: !!sessionId && !!projectName,
+  });
+
+  // Keep sendRef in sync so handleMessage can flush queued messages
+  sendRef.current = send;
+
+  // Load history and reset state when session changes
+  useEffect(() => {
+    let cancelled = false;
+
+    setIsStreaming(false);
+    setPendingApproval(null);
+    streamingContentRef.current = "";
+    streamingEventsRef.current = [];
+    setIsConnected(false);
+
+    if (projectName) {
+      // Load cached usage/rate-limit info immediately
+      fetch(`${projectUrl(projectName)}/chat/usage?providerId=${providerId}`, {
+        headers: { Authorization: `Bearer ${getAuthToken()}` },
+      })
+        .then((r) => r.json())
+        .then((json: any) => {
+          if (!cancelled && json.ok && json.data) {
+            setUsageInfo((prev) => ({ ...prev, ...json.data }));
+          }
+        })
+        .catch(() => {});
+    }
+
+    if (sessionId && projectName) {
+      // Load message history
+      setMessagesLoading(true);
+      fetch(`${projectUrl(projectName)}/chat/sessions/${sessionId}/messages?providerId=${providerId}`, {
+        headers: { Authorization: `Bearer ${getAuthToken()}` },
+      })
+        .then((r) => r.json())
+        .then((json: any) => {
+          if (cancelled || isStreamingRef.current) return;
+          if (json.ok && Array.isArray(json.data) && json.data.length > 0) {
+            setMessages(json.data);
+          } else {
+            setMessages([]);
+          }
+        })
+        .catch(() => {
+          if (!cancelled && !isStreamingRef.current) setMessages([]);
+        })
+        .finally(() => {
+          if (!cancelled) setMessagesLoading(false);
+        });
+    } else {
+      setMessages([]);
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [sessionId, providerId, projectName]);
+
+  const sendMessage = useCallback(
+    (content: string) => {
+      if (!content.trim()) return;
+
+      // If streaming, queue message to send after current stream finishes
+      if (isStreaming) {
+        pendingMessageRef.current = content;
+        return;
+      }
+
+      // Add user message
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: `user-${Date.now()}`,
+          role: "user" as const,
+          content,
+          timestamp: new Date().toISOString(),
+        },
+      ]);
+
+      // Reset streaming state
+      streamingContentRef.current = "";
+      streamingEventsRef.current = [];
+      isStreamingRef.current = true;
+      setIsStreaming(true);
+
+      send(JSON.stringify({ type: "message", content }));
+    },
+    [send, isStreaming],
+  );
+
+  const respondToApproval = useCallback(
+    (requestId: string, approved: boolean, data?: unknown) => {
+      send(
+        JSON.stringify({
+          type: "approval_response",
+          requestId,
+          approved,
+          data,
+        }),
+      );
+
+      // Merge answers into the AskUserQuestion tool_use event so FE shows selected answers
+      if (approved && data) {
+        const evts = streamingEventsRef.current;
+        const askEvt = evts.find(
+          (e: ChatEvent) =>
+            e.type === "approval_request" &&
+            (e as any).requestId === requestId &&
+            (e as any).tool === "AskUserQuestion",
+        );
+        if (askEvt) {
+          // Mutate input to include answers — this updates the rendered ToolCard
+          const inp = (askEvt as any).input;
+          if (inp && typeof inp === "object") {
+            (inp as Record<string, unknown>).answers = data;
+          }
+        }
+        // Force re-render messages
+        setMessages((prev) => [...prev]);
+      }
+
+      setPendingApproval(null);
+    },
+    [send],
+  );
+
+  const cancelStreaming = useCallback(() => {
+    if (!isStreamingRef.current) return;
+    // Tell backend to abort
+    send(JSON.stringify({ type: "cancel" }));
+    // Finalize current message on FE
+    const finalContent = streamingContentRef.current;
+    const finalEvents = [...streamingEventsRef.current];
+    setMessages((prev) => {
+      const last = prev[prev.length - 1];
+      if (last?.role === "assistant") {
+        return [
+          ...prev.slice(0, -1),
+          {
+            ...last,
+            id: `final-${Date.now()}`,
+            content: finalContent || last.content,
+            events: finalEvents.length > 0 ? finalEvents : last.events,
+          },
+        ];
+      }
+      return prev;
+    });
+    streamingContentRef.current = "";
+    streamingEventsRef.current = [];
+    pendingMessageRef.current = null;
+    isStreamingRef.current = false;
+    setIsStreaming(false);
+    setPendingApproval(null);
+  }, [send]);
+
+  const refreshUsage = useCallback(() => {
+    if (!projectName) return;
+    setUsageLoading(true);
+    fetch(`${projectUrl(projectName)}/chat/usage?providerId=${providerId}&_t=${Date.now()}`, {
+      headers: { Authorization: `Bearer ${getAuthToken()}` },
+    })
+      .then((r) => r.json())
+      .then((json: any) => {
+        if (json.ok && json.data) {
+          setUsageInfo((prev) => ({ ...prev, ...json.data }));
+        }
+      })
+      .catch(() => {})
+      .finally(() => setUsageLoading(false));
+  }, [projectName, providerId]);
+
+  return {
+    messages,
+    messagesLoading,
+    isStreaming,
+    pendingApproval,
+    usageInfo,
+    usageLoading,
+    sendMessage,
+    respondToApproval,
+    cancelStreaming,
+    refreshUsage,
+    isConnected,
+  };
+}