@hienlh/ppm 0.2.2 → 0.2.4

package/src/web/components/chat/chat-tab.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useRef, useEffect, type DragEvent } from "react"
 import { Upload } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useChat } from "@/hooks/use-chat";
+import { useUsage } from "@/hooks/use-usage";
 import { useTabStore } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
 import { MessageList } from "./message-list";
@@ -49,6 +50,10 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const activeProject = useProjectStore((s) => s.activeProject);
   const updateTab = useTabStore((s) => s.updateTab);
 
+  // Usage runs independently — auto-refreshes on interval
+  const { usageInfo, usageLoading, lastUpdatedAt, refreshUsage, mergeUsage } =
+    useUsage(activeProject?.name ?? "", providerId);
+
   // Persist sessionId and providerId to tab metadata so reload restores the session
   useEffect(() => {
     if (!tabId || !sessionId) return;
@@ -62,14 +67,13 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     messagesLoading,
     isStreaming,
     pendingApproval,
-    usageInfo,
-    usageLoading,
     sendMessage,
     respondToApproval,
     cancelStreaming,
-    refreshUsage,
+    reconnect,
+    refetchMessages,
     isConnected,
-  } = useChat(sessionId, providerId, activeProject?.name ?? "");
+  } = useChat(sessionId, providerId, activeProject?.name ?? "", { onUsageEvent: mergeUsage });
 
   const handleNewSession = useCallback(() => {
     const projectName = activeProject?.name ?? null;
@@ -248,11 +252,23 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           <div className="flex items-center gap-2">
             <UsageBadge
               usage={usageInfo}
+              loading={usageLoading}
               onClick={() => setShowUsageDetail((v) => !v)}
             />
-            {isConnected && (
-              <span className="size-2 rounded-full bg-green-500" title="Connected" />
-            )}
+            <button
+              onClick={() => {
+                if (!isConnected) reconnect();
+                refetchMessages();
+              }}
+              className="group relative size-4 flex items-center justify-center rounded-full hover:bg-surface-hover transition-colors"
+              title={isConnected ? "Connected — click to refetch messages" : "Disconnected — click to reconnect"}
+            >
+              <span
+                className={`size-2 rounded-full transition-colors ${
+                  isConnected ? "bg-green-500" : "bg-red-500 animate-pulse"
+                }`}
+              />
+            </button>
           </div>
         </div>
 
@@ -263,6 +279,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           onClose={() => setShowUsageDetail(false)}
           onReload={refreshUsage}
           loading={usageLoading}
+          lastUpdatedAt={lastUpdatedAt}
         />
 
         {/* Pickers (in-flow, above input — only one visible at a time) */}

package/src/web/components/chat/usage-badge.tsx

@@ -3,6 +3,7 @@ import type { UsageInfo, LimitBucket } from "../../../types/chat";
 
 interface UsageBadgeProps {
   usage: UsageInfo;
+  loading?: boolean;
   onClick?: () => void;
 }
 
@@ -18,7 +19,7 @@ function barColor(pct: number): string {
   return "bg-green-500";
 }
 
-export function UsageBadge({ usage, onClick }: UsageBadgeProps) {
+export function UsageBadge({ usage, loading, onClick }: UsageBadgeProps) {
   const fiveHourPct = usage.fiveHour != null ? Math.round(usage.fiveHour * 100) : null;
   const sevenDayPct = usage.sevenDay != null ? Math.round(usage.sevenDay * 100) : null;
 
@@ -34,7 +35,7 @@ export function UsageBadge({ usage, onClick }: UsageBadgeProps) {
       className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium tabular-nums transition-colors hover:bg-surface-hover ${colorClass}`}
       title="Click for usage details"
     >
-      <Activity className="size-3" />
+      {loading ? <RefreshCw className="size-3 animate-spin" /> : <Activity className="size-3" />}
       <span>5h:{fiveHourLabel}</span>
       <span className="text-text-subtle">·</span>
       <span>Wk:{sevenDayLabel}</span>
@@ -50,6 +51,7 @@ interface UsageDetailPanelProps {
   onClose: () => void;
   onReload?: () => void;
   loading?: boolean;
+  lastUpdatedAt?: number | null;
 }
 
 function formatResetTime(bucket?: LimitBucket): string | null {
@@ -74,34 +76,18 @@ function formatResetTime(bucket?: LimitBucket): string | null {
   return `${m}m`;
 }
 
-function statusLabel(status?: string): { text: string; color: string } | null {
-  if (!status) return null;
-  switch (status) {
-    case "ahead_of_pace": return { text: "Ahead of pace", color: "text-green-500" };
-    case "behind_pace": return { text: "Behind pace", color: "text-amber-500" };
-    case "on_pace": return { text: "On pace", color: "text-text-subtle" };
-    default: return { text: status.replace(/_/g, " "), color: "text-text-subtle" };
-  }
-}
-
 function BucketRow({ label, bucket }: { label: string; bucket?: LimitBucket }) {
   if (!bucket) return null;
   const pct = Math.round(bucket.utilization * 100);
   const reset = formatResetTime(bucket);
-  const status = statusLabel(bucket.status);
 
   return (
     <div className="space-y-1">
       <div className="flex items-center justify-between">
         <span className="text-xs font-medium text-text-primary">{label}</span>
-        <div className="flex items-center gap-2">
-          {status && (
-            <span className={`text-[10px] ${status.color}`}>{status.text}</span>
-          )}
-          {reset && (
-            <span className="text-[10px] text-text-subtle">↻ {reset}</span>
-          )}
-        </div>
+        {reset && (
+          <span className="text-[10px] text-text-subtle">↻ {reset}</span>
+        )}
       </div>
       <div className="flex items-center gap-2">
         <div className="flex-1 h-2 rounded-full bg-border overflow-hidden">
@@ -118,7 +104,16 @@ function BucketRow({ label, bucket }: { label: string; bucket?: LimitBucket }) {
   );
 }
 
-export function UsageDetailPanel({ usage, visible, onClose, onReload, loading }: UsageDetailPanelProps) {
+function formatLastUpdated(ts: number | null | undefined): string | null {
+  if (!ts) return null;
+  const secs = Math.round((Date.now() - ts) / 1000);
+  if (secs < 5) return "just now";
+  if (secs < 60) return `${secs}s ago`;
+  const mins = Math.floor(secs / 60);
+  return `${mins}m ago`;
+}
+
+export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, lastUpdatedAt }: UsageDetailPanelProps) {
   if (!visible) return null;
 
   const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
@@ -127,7 +122,12 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading }:
   return (
     <div className="border-b border-border bg-surface px-3 py-2.5 space-y-2.5">
       <div className="flex items-center justify-between">
-        <span className="text-xs font-semibold text-text-primary">Usage Limits</span>
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold text-text-primary">Usage Limits</span>
+          {lastUpdatedAt && (
+            <span className="text-[10px] text-text-subtle">{formatLastUpdated(lastUpdatedAt)}</span>
+          )}
+        </div>
         <div className="flex items-center gap-1">
           {onReload && (
             <button

package/src/web/components/layout/mobile-drawer.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useCallback } from "react";
 import {
   FolderOpen,
   Terminal,
@@ -13,12 +13,15 @@ import {
   Check,
   Plus,
   Search,
+  Bug,
 } from "lucide-react";
 import { useProjectStore, sortByRecent } from "@/stores/project-store";
 import { useTabStore, type TabType } from "@/stores/tab-store";
+import { useSettingsStore } from "@/stores/settings-store";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
 import { FileTree } from "@/components/explorer/file-tree";
+import { openBugReport } from "@/lib/report-bug";
 
 interface MobileDrawerProps {
   isOpen: boolean;
@@ -50,6 +53,7 @@ const MAX_VISIBLE_MOBILE = 5;
 export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
   const { projects, activeProject, setActiveProject } = useProjectStore();
   const openTab = useTabStore((s) => s.openTab);
+  const version = useSettingsStore((s) => s.version);
   const [projectPickerOpen, setProjectPickerOpen] = useState(false);
   const [query, setQuery] = useState("");
 
@@ -87,6 +91,8 @@ export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
     setQuery("");
   }
 
+  const handleReportBug = useCallback(() => openBugReport(version), [version]);
+
   return (
     <div
       className={cn(
@@ -231,6 +237,18 @@ export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
               </div>
             )}
           </div>
+
+          {/* Report Bug + Version */}
+          <div className="flex items-center justify-between px-4 py-2 border-t border-border">
+            {version && <span className="text-[10px] text-text-subtle">v{version}</span>}
+            <button
+              onClick={handleReportBug}
+              className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-secondary transition-colors"
+            >
+              <Bug className="size-3" />
+              <span>Report Bug</span>
+            </button>
+          </div>
         </div>
       </div>
     </div>

package/src/web/components/layout/sidebar.tsx

@@ -1,5 +1,5 @@
-import { useState, useMemo } from "react";
-import { FolderOpen, ChevronDown, Check, Plus, Search } from "lucide-react";
+import { useState, useMemo, useCallback } from "react";
+import { FolderOpen, ChevronDown, Check, Plus, Search, Bug } from "lucide-react";
 import { useProjectStore, sortByRecent } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { FileTree } from "@/components/explorer/file-tree";
@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useSettingsStore } from "@/stores/settings-store";
 import { cn } from "@/lib/utils";
+import { openBugReport } from "@/lib/report-bug";
 
 /** Max projects shown before needing to search (desktop) */
 const MAX_VISIBLE = 8;
@@ -39,6 +40,8 @@ export function Sidebar() {
     openTab({ type: "projects", title: "Projects", projectId: null, closable: true });
   }
 
+  const handleReportBug = useCallback(() => openBugReport(version), [version]);
+
   return (
     <aside className="hidden md:flex flex-col w-[280px] min-w-[280px] bg-background border-r border-border overflow-hidden">
       {/* Logo + project dropdown — same height as tab bar */}
@@ -130,10 +133,18 @@ export function Sidebar() {
         </div>
       )}
 
-      {/* Version footer */}
+      {/* Version footer + Report Bug */}
       {version && (
-        <div className="px-3 py-1.5 border-t border-border shrink-0">
+        <div className="flex items-center justify-between px-3 py-1.5 border-t border-border shrink-0">
           <span className="text-[10px] text-text-subtle">v{version}</span>
+          <button
+            onClick={handleReportBug}
+            title="Report a bug"
+            className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-secondary transition-colors"
+          >
+            <Bug className="size-3" />
+            <span>Report Bug</span>
+          </button>
         </div>
       )}
     </aside>

package/src/web/components/projects/project-list.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from "react";
-import { FolderOpen, GitBranch, Circle, Plus } from "lucide-react";
+import { FolderOpen, GitBranch, Circle, Plus, Pencil, Trash2 } from "lucide-react";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { api } from "@/lib/api-client";
@@ -10,29 +10,43 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
+  DialogDescription,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { DirSuggest } from "./dir-suggest";
+import type { ProjectInfo } from "@/stores/project-store";
 
 export function ProjectList() {
   const { projects, activeProject, setActiveProject, fetchProjects, loading, error } =
     useProjectStore();
   const openTab = useTabStore((s) => s.openTab);
+
+  // Add dialog state
   const [showAdd, setShowAdd] = useState(false);
   const [addPath, setAddPath] = useState("");
   const [addName, setAddName] = useState("");
   const [addError, setAddError] = useState("");
 
+  // Edit dialog state
+  const [editTarget, setEditTarget] = useState<ProjectInfo | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editPath, setEditPath] = useState("");
+  const [editError, setEditError] = useState("");
+
+  // Delete dialog state
+  const [deleteTarget, setDeleteTarget] = useState<ProjectInfo | null>(null);
+  const [deleteError, setDeleteError] = useState("");
+
   useEffect(() => {
     fetchProjects();
   }, [fetchProjects]);
 
-  function handleClick(project: (typeof projects)[number]) {
+  function handleClick(project: ProjectInfo) {
     setActiveProject(project);
   }
 
-  function handleOpen(project: (typeof projects)[number]) {
+  function handleOpen(project: ProjectInfo) {
     setActiveProject(project);
     openTab({
       type: "terminal",
@@ -60,6 +74,60 @@ export function ProjectList() {
     }
   }, [addPath, addName, fetchProjects]);
 
+  function openEdit(project: ProjectInfo, e: React.MouseEvent) {
+    e.stopPropagation();
+    setEditTarget(project);
+    setEditName(project.name);
+    setEditPath(project.path);
+    setEditError("");
+  }
+
+  const handleEditProject = useCallback(async () => {
+    if (!editTarget || !editName.trim()) return;
+    setEditError("");
+    try {
+      await api.patch(`/api/projects/${encodeURIComponent(editTarget.name)}`, {
+        name: editName.trim(),
+        path: editPath.trim() || undefined,
+      });
+      await fetchProjects();
+      // Update active project if it was the one edited
+      if (activeProject?.name === editTarget.name) {
+        const updated = useProjectStore.getState().projects
+          .find((p) => p.name === editName.trim());
+        if (updated) setActiveProject(updated);
+      }
+      setEditTarget(null);
+    } catch (e) {
+      setEditError(e instanceof Error ? e.message : "Failed to update project");
+    }
+  }, [editTarget, editName, editPath, fetchProjects, activeProject, setActiveProject]);
+
+  function openDelete(project: ProjectInfo, e: React.MouseEvent) {
+    e.stopPropagation();
+    setDeleteTarget(project);
+    setDeleteError("");
+  }
+
+  const handleDeleteProject = useCallback(async () => {
+    if (!deleteTarget) return;
+    setDeleteError("");
+    try {
+      await api.del(`/api/projects/${encodeURIComponent(deleteTarget.name)}`);
+      // Clear active project if it was deleted
+      if (activeProject?.name === deleteTarget.name) {
+        const remaining = projects.filter((p) => p.name !== deleteTarget.name);
+        if (remaining.length > 0) {
+          setActiveProject(remaining[0]!);
+        }
+      }
+      await fetchProjects();
+      setDeleteTarget(null);
+    } catch (e) {
+      setDeleteError(e instanceof Error ? e.message : "Failed to delete project");
+    }
+  }, [deleteTarget, activeProject, projects, fetchProjects, setActiveProject]);
+
   if (error) {
     return (
       <div className="flex items-center justify-center h-full p-4">
@@ -104,13 +172,31 @@ export function ProjectList() {
             onClick={() => handleClick(project)}
             onDoubleClick={() => handleOpen(project)}
             className={cn(
-              "text-left p-4 rounded-lg border transition-colors",
+              "group text-left p-4 rounded-lg border transition-colors relative",
               "min-h-[44px]",
               activeProject?.name === project.name
                 ? "bg-surface border-primary"
                 : "bg-surface border-border hover:border-text-subtle",
             )}
           >
+            {/* Action buttons */}
+            <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              <button
+                onClick={(e) => openEdit(project, e)}
+                className="p-1.5 rounded-md hover:bg-surface-elevated text-text-subtle hover:text-text-primary transition-colors"
+                title="Edit project"
+              >
+                <Pencil className="size-3.5" />
+              </button>
+              <button
+                onClick={(e) => openDelete(project, e)}
+                className="p-1.5 rounded-md hover:bg-error/10 text-text-subtle hover:text-error transition-colors"
+                title="Remove project"
+              >
+                <Trash2 className="size-3.5" />
+              </button>
+            </div>
+
             <div className="flex items-start gap-3">
               <FolderOpen className="size-5 text-primary shrink-0 mt-0.5" />
               <div className="flex-1 min-w-0 space-y-1">
@@ -182,6 +268,69 @@ export function ProjectList() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Edit Project Dialog */}
+      <Dialog open={!!editTarget} onOpenChange={(open) => !open && setEditTarget(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit Project</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <label className="text-sm text-text-secondary">Name</label>
+              <Input
+                value={editName}
+                onChange={(e) => setEditName(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleEditProject()}
+                autoFocus
+              />
+            </div>
+            <div>
+              <label className="text-sm text-text-secondary">Path</label>
+              <DirSuggest
+                value={editPath}
+                onChange={setEditPath}
+                placeholder="/home/user/my-project"
+              />
+            </div>
+            {editError && (
+              <p className="text-sm text-error">{editError}</p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditTarget(null)}>
+              Cancel
+            </Button>
+            <Button onClick={handleEditProject} disabled={!editName.trim()}>
+              Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Remove Project</DialogTitle>
+            <DialogDescription>
+              Remove <strong>{deleteTarget?.name}</strong> from PPM? This only unregisters
+              it — project files on disk are not affected.
+            </DialogDescription>
+          </DialogHeader>
+          {deleteError && (
+            <p className="text-sm text-error">{deleteError}</p>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleDeleteProject}>
+              Remove
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

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

@@ -4,34 +4,40 @@ import { getAuthToken, projectUrl } from "@/lib/api-client";
 import type { ChatMessage, ChatEvent, UsageInfo } from "../../types/chat";
 import type { ChatWsServerMessage } from "../../types/api";
 
+/** Callback to forward WS usage events to the external useUsage hook */
+export type UsageEventCallback = (usage: Partial<UsageInfo>) => void;
+
 interface ApprovalRequest {
   requestId: string;
   tool: string;
   input: unknown;
 }
 
+interface UseChatOptions {
+  onUsageEvent?: UsageEventCallback;
+}
+
 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;
+  reconnect: () => void;
+  refetchMessages: () => void;
   isConnected: boolean;
 }
 
-export function useChat(sessionId: string | null, providerId = "claude-sdk", projectName = ""): UseChatReturn {
+export function useChat(sessionId: string | null, providerId = "claude-sdk", projectName = "", options?: UseChatOptions): 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 onUsageEventRef = useRef(options?.onUsageEvent);
+  onUsageEventRef.current = options?.onUsageEvent;
   const streamingContentRef = useRef("");
   const streamingEventsRef = useRef<ChatEvent[]>([]);
   const isStreamingRef = useRef(false);
@@ -137,15 +143,8 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
       }
 
       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;
-        });
+        // Forward to external usage hook
+        onUsageEventRef.current?.(data.usage);
         break;
       }
 
@@ -230,7 +229,7 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
     ? `/ws/project/${encodeURIComponent(projectName)}/chat/${sessionId}`
     : "";
 
-  const { send } = useWebSocket({
+  const { send, connect: wsReconnect } = useWebSocket({
     url: wsUrl,
     onMessage: handleMessage,
     autoConnect: !!sessionId && !!projectName,
@@ -249,20 +248,6 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
     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);
@@ -391,33 +376,37 @@ export function useChat(sessionId: string | null, providerId = "claude-sdk", pro
     setPendingApproval(null);
   }, [send]);
 
-  const refreshUsage = useCallback(() => {
-    if (!projectName) return;
-    setUsageLoading(true);
-    fetch(`${projectUrl(projectName)}/chat/usage?providerId=${providerId}&_t=${Date.now()}`, {
+  const reconnect = useCallback(() => {
+    setIsConnected(false);
+    wsReconnect();
+  }, [wsReconnect]);
+
+  const refetchMessages = useCallback(() => {
+    if (!sessionId || !projectName || isStreamingRef.current) return;
+    setMessagesLoading(true);
+    fetch(`${projectUrl(projectName)}/chat/sessions/${sessionId}/messages?providerId=${providerId}`, {
       headers: { Authorization: `Bearer ${getAuthToken()}` },
     })
       .then((r) => r.json())
       .then((json: any) => {
-        if (json.ok && json.data) {
-          setUsageInfo((prev) => ({ ...prev, ...json.data }));
+        if (json.ok && Array.isArray(json.data) && json.data.length > 0) {
+          setMessages(json.data);
         }
       })
       .catch(() => {})
-      .finally(() => setUsageLoading(false));
-  }, [projectName, providerId]);
+      .finally(() => setMessagesLoading(false));
+  }, [sessionId, providerId, projectName]);
 
   return {
     messages,
     messagesLoading,
     isStreaming,
     pendingApproval,
-    usageInfo,
-    usageLoading,
     sendMessage,
     respondToApproval,
     cancelStreaming,
-    refreshUsage,
+    reconnect,
+    refetchMessages,
     isConnected,
   };
 }