@hienlh/ppm 0.9.57 → 0.9.59

package/src/web/components/chat/chat-history-bar.tsx

@@ -8,7 +8,7 @@ import { AISettingsSection } from "@/components/settings/ai-settings-section";
 import { UsageDetailPanel } from "./usage-badge";
 import { TeamActivityPanel } from "./team-activity-panel";
 import { ProviderBadge } from "./provider-selector";
-import type { SessionInfo } from "../../../types/chat";
+import type { SessionInfo, SessionListResponse } from "../../../types/chat";
 import type { UsageInfo } from "../../../types/chat";
 import type { TeamMessageItem } from "@/hooks/use-chat";
 
@@ -107,8 +107,11 @@ export function ChatHistoryBar({
   const [searchQuery, setSearchQuery] = useState("");
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editingTitle, setEditingTitle] = useState("");
+  const [hasMore, setHasMore] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
   const editInputRef = useRef<HTMLInputElement>(null);
   const openTab = useTabStore((s) => s.openTab);
+  const PAGE_SIZE = 50;
 
   const togglePanel = (panel: PanelType) => {
     setActivePanel((prev) => prev === panel ? null : panel);
@@ -118,8 +121,9 @@ export function ChatHistoryBar({
     if (!projectName) return;
     setLoading(true);
     try {
-      const data = await api.get<SessionInfo[]>(`${projectUrl(projectName)}/chat/sessions`);
-      setSessions(data);
+      const data = await api.get<SessionListResponse>(`${projectUrl(projectName)}/chat/sessions?limit=${PAGE_SIZE}&offset=0`);
+      setSessions(data.sessions);
+      setHasMore(data.hasMore);
     } catch {
       // silent
     } finally {
@@ -127,6 +131,26 @@ export function ChatHistoryBar({
     }
   }, [projectName]);
 
+  const loadMore = useCallback(async () => {
+    if (!projectName || loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    try {
+      // Offset by count of non-pinned sessions (pinned are injected separately by backend)
+      const unpinnedCount = sessions.filter((s) => !s.pinned).length;
+      const data = await api.get<SessionListResponse>(`${projectUrl(projectName)}/chat/sessions?limit=${PAGE_SIZE}&offset=${unpinnedCount}`);
+      setSessions((prev) => {
+        const existingIds = new Set(prev.map((s) => s.id));
+        const newSessions = data.sessions.filter((s) => !existingIds.has(s.id));
+        return [...prev, ...newSessions];
+      });
+      setHasMore(data.hasMore);
+    } catch {
+      // silent
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [projectName, loadingMore, hasMore, sessions]);
+
   // Load sessions when history panel opens
   useEffect(() => {
     if (activePanel === "history" && sessions.length === 0) load();
@@ -367,78 +391,90 @@ export function ChatHistoryBar({
                 {searchQuery ? "No matching sessions" : "No sessions yet"}
               </div>
             ) : (
-              filteredSessions.map((session) => (
-                <div
-                  key={session.id}
-                  className="flex items-center gap-2 w-full px-3 py-1.5 text-left hover:bg-surface-elevated transition-colors group"
-                >
-                  <ProviderBadge providerId={session.providerId} />
-                  {editingId === session.id ? (
-                    <form
-                      className="flex items-center gap-1 flex-1 min-w-0"
-                      onSubmit={(e) => { e.preventDefault(); saveTitle(); }}
-                    >
-                      <input
-                        ref={editInputRef}
-                        value={editingTitle}
-                        onChange={(e) => setEditingTitle(e.target.value)}
-                        onBlur={saveTitle}
-                        onKeyDown={(e) => { if (e.key === "Escape") cancelEditing(); }}
-                        className="flex-1 min-w-0 bg-surface-elevated text-[11px] text-text-primary px-1 py-0.5 rounded border border-border outline-none focus:border-primary"
-                        autoFocus
-                      />
-                      <button type="submit" className="p-0.5 text-green-500 hover:text-green-400" onClick={(e) => e.stopPropagation()}>
-                        <Check className="size-3" />
-                      </button>
-                      <button type="button" className="p-0.5 text-text-subtle hover:text-text-secondary" onClick={(e) => { e.stopPropagation(); cancelEditing(); }}>
-                        <X className="size-3" />
-                      </button>
-                    </form>
-                  ) : (
-                    <>
-                      <button
-                        onClick={() => openSession(session)}
-                        className="text-[11px] truncate flex-1 text-left flex items-center gap-1"
-                      >
-                        {session.title?.startsWith("[PPM]") && (
-                          <Bot className="size-3 text-muted-foreground shrink-0" />
-                        )}
-                        {session.title?.startsWith("[PPM]")
-                          ? session.title.slice(7)
-                          : session.title || "Untitled"}
-                      </button>
-                      <button
-                        onClick={(e) => togglePin(e, session)}
-                        className={`p-0.5 rounded transition-all ${
-                          session.pinned
-                            ? "text-primary hover:text-primary/70"
-                            : "text-text-subtle hover:text-text-secondary can-hover:opacity-0 can-hover:group-hover:opacity-100"
-                        }`}
-                        title={session.pinned ? "Unpin session" : "Pin session"}
-                      >
-                        {session.pinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
-                      </button>
-                      <button
-                        onClick={(e) => startEditing(session, e)}
-                        className="p-0.5 rounded text-text-subtle hover:text-text-secondary can-hover:opacity-0 can-hover:group-hover:opacity-100 transition-opacity"
-                        title="Rename session"
-                      >
-                        <Pencil className="size-3" />
-                      </button>
-                      <button
-                        onClick={(e) => deleteSession(e, session)}
-                        className="p-0.5 rounded text-text-subtle hover:text-red-400 hover:bg-red-500/20 can-hover:opacity-0 can-hover:group-hover:opacity-100 transition-opacity"
-                        title="Delete session"
+              <>
+                {filteredSessions.map((session) => (
+                  <div
+                    key={session.id}
+                    className="flex items-center gap-2 w-full px-3 py-1.5 text-left hover:bg-surface-elevated transition-colors group"
+                  >
+                    <ProviderBadge providerId={session.providerId} />
+                    {editingId === session.id ? (
+                      <form
+                        className="flex items-center gap-1 flex-1 min-w-0"
+                        onSubmit={(e) => { e.preventDefault(); saveTitle(); }}
                       >
-                        <Trash2 className="size-3" />
-                      </button>
-                    </>
-                  )}
-                  {editingId !== session.id && session.updatedAt && (
-                    <span className="text-[10px] text-text-subtle shrink-0 w-10 text-right">{formatDate(session.updatedAt)}</span>
-                  )}
-                </div>
-              ))
+                        <input
+                          ref={editInputRef}
+                          value={editingTitle}
+                          onChange={(e) => setEditingTitle(e.target.value)}
+                          onBlur={saveTitle}
+                          onKeyDown={(e) => { if (e.key === "Escape") cancelEditing(); }}
+                          className="flex-1 min-w-0 bg-surface-elevated text-[11px] text-text-primary px-1 py-0.5 rounded border border-border outline-none focus:border-primary"
+                          autoFocus
+                        />
+                        <button type="submit" className="p-0.5 text-green-500 hover:text-green-400" onClick={(e) => e.stopPropagation()}>
+                          <Check className="size-3" />
+                        </button>
+                        <button type="button" className="p-0.5 text-text-subtle hover:text-text-secondary" onClick={(e) => { e.stopPropagation(); cancelEditing(); }}>
+                          <X className="size-3" />
+                        </button>
+                      </form>
+                    ) : (
+                      <>
+                        <button
+                          onClick={() => openSession(session)}
+                          className="text-[11px] truncate flex-1 text-left flex items-center gap-1"
+                        >
+                          {session.title?.startsWith("[PPM]") && (
+                            <Bot className="size-3 text-muted-foreground shrink-0" />
+                          )}
+                          {session.title?.startsWith("[PPM]")
+                            ? session.title.slice(7)
+                            : session.title || "Untitled"}
+                        </button>
+                        <button
+                          onClick={(e) => togglePin(e, session)}
+                          className={`p-0.5 rounded transition-all ${
+                            session.pinned
+                              ? "text-primary hover:text-primary/70"
+                              : "text-text-subtle hover:text-text-secondary can-hover:opacity-0 can-hover:group-hover:opacity-100"
+                          }`}
+                          title={session.pinned ? "Unpin session" : "Pin session"}
+                        >
+                          {session.pinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
+                        </button>
+                        <button
+                          onClick={(e) => startEditing(session, e)}
+                          className="p-0.5 rounded text-text-subtle hover:text-text-secondary can-hover:opacity-0 can-hover:group-hover:opacity-100 transition-opacity"
+                          title="Rename session"
+                        >
+                          <Pencil className="size-3" />
+                        </button>
+                        <button
+                          onClick={(e) => deleteSession(e, session)}
+                          className="p-0.5 rounded text-text-subtle hover:text-red-400 hover:bg-red-500/20 can-hover:opacity-0 can-hover:group-hover:opacity-100 transition-opacity"
+                          title="Delete session"
+                        >
+                          <Trash2 className="size-3" />
+                        </button>
+                      </>
+                    )}
+                    {editingId !== session.id && session.updatedAt && (
+                      <span className="text-[10px] text-text-subtle shrink-0 w-10 text-right">{formatDate(session.updatedAt)}</span>
+                    )}
+                  </div>
+                ))}
+                {hasMore && !searchQuery && (
+                  <button
+                    onClick={loadMore}
+                    disabled={loadingMore}
+                    className="flex items-center justify-center gap-1 w-full py-1.5 text-[11px] text-text-subtle hover:text-text-secondary hover:bg-surface-elevated transition-colors"
+                  >
+                    {loadingMore ? <Loader2 className="size-3 animate-spin" /> : null}
+                    {loadingMore ? "Loading..." : "Load more"}
+                  </button>
+                )}
+              </>
             )}
           </div>
         </div>

package/src/web/components/chat/chat-history-panel.tsx

@@ -27,8 +27,8 @@ export function ChatHistoryPanel({ projectName }: ChatHistoryPanelProps) {
     setLoading(true);
     setError(null);
     try {
-      const data = await api.get<SessionInfo[]>(`${projectUrl(projectName)}/chat/sessions`);
-      setSessions(data);
+      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions`);
+      setSessions(data.sessions);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to load sessions");
     } finally {

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

@@ -38,8 +38,8 @@ export function ChatWelcome({ projectName, onSelectSession }: ChatWelcomeProps)
     if (!projectName) return;
     setLoading(true);
     try {
-      const data = await api.get<SessionInfo[]>(`${projectUrl(projectName)}/chat/sessions`);
-      setSessions(data.slice(0, FETCH_SESSIONS_LIMIT));
+      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions?limit=${FETCH_SESSIONS_LIMIT}`);
+      setSessions(data.sessions.slice(0, FETCH_SESSIONS_LIMIT));
     } catch {
       // silently ignore
     } finally {

package/src/web/components/chat/session-picker.tsx

@@ -25,8 +25,8 @@ export function SessionPicker({
     if (!projectName) return;
     setLoading(true);
     try {
-      const data = await api.get<SessionInfo[]>(`${projectUrl(projectName)}/chat/sessions`);
-      setSessions(data);
+      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions`);
+      setSessions(data.sessions);
     } catch {
       // Silently fail — sessions list is non-critical
     } finally {

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

@@ -14,6 +14,7 @@ import {
 } from "../../lib/api-settings";
 import { AddAccountDialog, ExportAccountsDialog, ImportAccountsDialog } from "./account-dialogs";
 import { AccountRotationSettings } from "./account-rotation-settings";
+import { UsagePatternChart } from "./usage-pattern-chart";
 
 interface UsageBadgeProps {
   usage: UsageInfo;
@@ -160,7 +161,7 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onDelete, on
   onToggle?: (id: string, status: string) => void;
   onDelete?: (id: string, display: string) => void;
   onExport?: (id: string) => void;
-  onViewProfile?: (profile: OAuthProfileData) => void;
+  onViewProfile?: (profile: OAuthProfileData, accountId: string) => void;
   flash?: boolean;
   fullscreen?: boolean;
 }) {
@@ -187,7 +188,7 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onDelete, on
           {!isExpired && onViewProfile && accountInfo?.profileData && (
             <button
               className="p-1 rounded cursor-pointer text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
-              onClick={() => onViewProfile(accountInfo.profileData!)}
+              onClick={() => onViewProfile(accountInfo.profileData!, entry.accountId)}
               title="View profile"
             >
               <Eye className="size-3" />
@@ -259,7 +260,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
   const [initialLoading, setInitialLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [flashIds, setFlashIds] = useState<Set<string>>(new Set());
-  const [profileView, setProfileView] = useState<OAuthProfileData | null>(null);
+  const [profileView, setProfileView] = useState<{ profile: OAuthProfileData; accountId: string } | null>(null);
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showExportDialog, setShowExportDialog] = useState(false);
   const [showImportDialog, setShowImportDialog] = useState(false);
@@ -441,7 +442,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
                 onToggle={handleToggle}
                 onDelete={(id, display) => setDeleteTarget({ id, display })}
                 onExport={(id) => { setExportPreselect(id); setShowExportDialog(true); }}
-                onViewProfile={setProfileView}
+                onViewProfile={(profile, accountId) => setProfileView({ profile, accountId })}
                 flash={flashIds.has(entry.accountId)}
                 fullscreen={isFullscreen}
               />
@@ -494,13 +495,14 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
             </button>
           </div>
           <div className="grid grid-cols-[70px_1fr] gap-x-2 gap-y-0.5 text-[10px]">
-            {profileView.account?.display_name && <><span className="text-text-subtle">Name</span><span>{profileView.account.display_name}</span></>}
-            {profileView.account?.email && <><span className="text-text-subtle">Email</span><span>{profileView.account.email}</span></>}
-            {profileView.organization?.name && <><span className="text-text-subtle">Org</span><span>{profileView.organization.name}</span></>}
-            {profileView.organization?.organization_type && <><span className="text-text-subtle">Type</span><span>{profileView.organization.organization_type}</span></>}
-            {profileView.organization?.rate_limit_tier && <><span className="text-text-subtle">Tier</span><span>{profileView.organization.rate_limit_tier}</span></>}
-            {profileView.organization?.subscription_status && <><span className="text-text-subtle">Status</span><span>{profileView.organization.subscription_status}</span></>}
+            {profileView.profile.account?.display_name && <><span className="text-text-subtle">Name</span><span>{profileView.profile.account.display_name}</span></>}
+            {profileView.profile.account?.email && <><span className="text-text-subtle">Email</span><span>{profileView.profile.account.email}</span></>}
+            {profileView.profile.organization?.name && <><span className="text-text-subtle">Org</span><span>{profileView.profile.organization.name}</span></>}
+            {profileView.profile.organization?.organization_type && <><span className="text-text-subtle">Type</span><span>{profileView.profile.organization.organization_type}</span></>}
+            {profileView.profile.organization?.rate_limit_tier && <><span className="text-text-subtle">Tier</span><span>{profileView.profile.organization.rate_limit_tier}</span></>}
+            {profileView.profile.organization?.subscription_status && <><span className="text-text-subtle">Status</span><span>{profileView.profile.organization.subscription_status}</span></>}
           </div>
+          <UsagePatternChart accountId={profileView.accountId} />
         </div>
       )}
 

package/src/web/components/chat/usage-pattern-chart.tsx

@@ -0,0 +1,203 @@
+import { useState, useEffect, useMemo } from "react";
+import { Loader2 } from "lucide-react";
+import { getUsageHistory, type UsageSnapshot } from "../../lib/api-settings";
+
+const DAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const HOUR_LABELS = Array.from({ length: 24 }, (_, i) => i);
+
+type ViewMode = "5h" | "weekly";
+
+interface AggregatedCell {
+  sum: number;
+  count: number;
+  avg: number;
+}
+
+/** Aggregate snapshots into a 7×24 grid (day-of-week × hour-of-day) */
+function buildHeatmap(snapshots: UsageSnapshot[], mode: ViewMode): AggregatedCell[][] {
+  // grid[dayOfWeek 0-6][hour 0-23]
+  const grid: AggregatedCell[][] = Array.from({ length: 7 }, () =>
+    Array.from({ length: 24 }, () => ({ sum: 0, count: 0, avg: 0 })),
+  );
+
+  for (const snap of snapshots) {
+    const val = mode === "5h" ? snap.five_hour_util : snap.weekly_util;
+    if (val == null) continue;
+    const d = new Date(snap.recorded_at + (snap.recorded_at.endsWith("Z") ? "" : "Z"));
+    const dow = (d.getDay() + 6) % 7; // Monday=0
+    const hour = d.getHours();
+    grid[dow]![hour]!.sum += val;
+    grid[dow]![hour]!.count += 1;
+  }
+
+  // Compute averages
+  for (const row of grid) {
+    for (const cell of row) {
+      cell.avg = cell.count > 0 ? cell.sum / cell.count : 0;
+    }
+  }
+  return grid;
+}
+
+/** Aggregate snapshots by day-of-week (average utilization) */
+function buildDayAvg(grid: AggregatedCell[][]): number[] {
+  return grid.map((row) => {
+    const totalSum = row.reduce((s, c) => s + c.sum, 0);
+    const totalCount = row.reduce((s, c) => s + c.count, 0);
+    return totalCount > 0 ? totalSum / totalCount : 0;
+  });
+}
+
+/** Aggregate snapshots by hour-of-day (average utilization) */
+function buildHourAvg(grid: AggregatedCell[][]): number[] {
+  return HOUR_LABELS.map((h) => {
+    let sum = 0, count = 0;
+    for (const row of grid) {
+      sum += row[h]!.sum;
+      count += row[h]!.count;
+    }
+    return count > 0 ? sum / count : 0;
+  });
+}
+
+function cellColor(val: number): string {
+  if (val === 0) return "bg-surface-elevated";
+  if (val < 0.3) return "bg-green-500/30";
+  if (val < 0.5) return "bg-green-500/60";
+  if (val < 0.7) return "bg-amber-500/50";
+  if (val < 0.9) return "bg-amber-500/80";
+  return "bg-red-500/80";
+}
+
+function barColor(val: number): string {
+  if (val < 0.3) return "bg-green-500";
+  if (val < 0.7) return "bg-amber-500";
+  return "bg-red-500";
+}
+
+export function UsagePatternChart({ accountId }: { accountId: string }) {
+  const [snapshots, setSnapshots] = useState<UsageSnapshot[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [mode, setMode] = useState<ViewMode>("5h");
+
+  useEffect(() => {
+    setLoading(true);
+    getUsageHistory(accountId)
+      .then(setSnapshots)
+      .catch(() => setSnapshots([]))
+      .finally(() => setLoading(false));
+  }, [accountId]);
+
+  const grid = useMemo(() => snapshots ? buildHeatmap(snapshots, mode) : null, [snapshots, mode]);
+  const dayAvg = useMemo(() => grid ? buildDayAvg(grid) : [], [grid]);
+  const hourAvg = useMemo(() => grid ? buildHourAvg(grid) : [], [grid]);
+  const maxDay = Math.max(...dayAvg, 0.01);
+  const maxHour = Math.max(...hourAvg, 0.01);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-3">
+        <Loader2 className="size-3 animate-spin text-text-subtle" />
+      </div>
+    );
+  }
+
+  if (!snapshots || snapshots.length === 0) {
+    return (
+      <div className="text-[10px] text-text-subtle py-2 text-center">
+        No usage history yet
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-2 space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] font-medium text-text-subtle">Usage Pattern (7d)</span>
+        <div className="flex gap-0.5 text-[9px]">
+          <button
+            onClick={() => setMode("5h")}
+            className={`px-1.5 py-0.5 rounded cursor-pointer transition-colors ${mode === "5h" ? "bg-primary/15 text-primary" : "text-text-subtle hover:text-text-secondary"}`}
+          >
+            5h
+          </button>
+          <button
+            onClick={() => setMode("weekly")}
+            className={`px-1.5 py-0.5 rounded cursor-pointer transition-colors ${mode === "weekly" ? "bg-primary/15 text-primary" : "text-text-subtle hover:text-text-secondary"}`}
+          >
+            Wk
+          </button>
+        </div>
+      </div>
+
+      {/* Day of week bars */}
+      <div>
+        <span className="text-[9px] text-text-subtle">By Day</span>
+        <div className="flex flex-col gap-[2px] mt-0.5">
+          {DAY_LABELS.map((label, i) => {
+            const val = dayAvg[i] ?? 0;
+            return (
+              <div key={label} className="flex items-center gap-1">
+                <span className="text-[8px] text-text-subtle w-5 shrink-0 text-right tabular-nums">{label}</span>
+                <div className="flex-1 h-2.5 bg-surface-elevated rounded-sm overflow-hidden">
+                  <div
+                    className={`h-full rounded-sm transition-all ${barColor(val)}`}
+                    style={{ width: `${Math.round((val / maxDay) * 100)}%` }}
+                  />
+                </div>
+                <span className="text-[8px] text-text-subtle w-6 shrink-0 text-right tabular-nums">
+                  {Math.round(val * 100)}%
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Hour of day heatmap */}
+      <div>
+        <span className="text-[9px] text-text-subtle">By Hour</span>
+        <div className="flex gap-[1px] mt-0.5">
+          {HOUR_LABELS.map((h) => {
+            const val = hourAvg[h] ?? 0;
+            return (
+              <div key={h} className="flex-1 flex flex-col items-center gap-[1px]">
+                <div
+                  className={`w-full aspect-square rounded-[2px] ${cellColor(val)}`}
+                  title={`${h}:00 — ${Math.round(val * 100)}%`}
+                />
+                {h % 6 === 0 && (
+                  <span className="text-[7px] text-text-subtle tabular-nums">{h}</span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Heatmap: day × hour grid */}
+      {grid && (
+        <div>
+          <span className="text-[9px] text-text-subtle">Heatmap</span>
+          <div className="flex flex-col gap-[1px] mt-0.5">
+            {DAY_LABELS.map((label, d) => (
+              <div key={label} className="flex items-center gap-[1px]">
+                <span className="text-[7px] text-text-subtle w-4 shrink-0 text-right">{label.charAt(0)}</span>
+                {HOUR_LABELS.map((h) => {
+                  const cell = grid[d]![h]!;
+                  return (
+                    <div
+                      key={h}
+                      className={`flex-1 aspect-square rounded-[1px] ${cellColor(cell.avg)}`}
+                      title={`${label} ${h}:00 — ${cell.count > 0 ? Math.round(cell.avg * 100) + "%" : "no data"}`}
+                    />
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/components/layout/editor-panel.tsx

@@ -108,8 +108,8 @@ function EmptyPanel({ panelId }: { panelId: string }) {
     if (!activeProject?.name) return;
     setLoadingSessions(true);
     try {
-      const data = await api.get<SessionInfo[]>(`${projectUrl(activeProject.name)}/chat/sessions`);
-      setSessions(data.slice(0, FETCH_SESSIONS_LIMIT));
+      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(activeProject.name)}/chat/sessions?limit=${FETCH_SESSIONS_LIMIT}`);
+      setSessions(data.sessions.slice(0, FETCH_SESSIONS_LIMIT));
     } catch {
       // silently ignore — empty state still functional without sessions
     } finally {

package/src/web/lib/api-settings.ts

@@ -115,6 +115,20 @@ export function getAllAccountUsages(): Promise<AccountUsageEntry[]> {
   return api.get<AccountUsageEntry[]>("/api/accounts/usage");
 }
 
+export interface UsageSnapshot {
+  id: number;
+  account_id: string | null;
+  five_hour_util: number | null;
+  weekly_util: number | null;
+  weekly_opus_util: number | null;
+  weekly_sonnet_util: number | null;
+  recorded_at: string;
+}
+
+export function getUsageHistory(accountId: string): Promise<UsageSnapshot[]> {
+  return api.get<UsageSnapshot[]>(`/api/accounts/${accountId}/usage-history`);
+}
+
 export function importAccounts(params: { data: string; password: string }): Promise<{ imported: number; refreshed: number }> {
   return api.post<{ imported: number; refreshed: number }>("/api/accounts/import", params);
 }

package/dist/web/assets/api-settings-Bid0NHuI.js

@@ -1 +0,0 @@
-import{r as e}from"./chunk-CFjPhJqf.js";import{t}from"./api-client-BKIT_Qeg.js";var n=e({addAccount:()=>a,deleteAccount:()=>o,exchangeOAuthCode:()=>d,getAISettings:()=>h,getAccountSettings:()=>c,getAccounts:()=>r,getActiveAccount:()=>i,getAllAccountUsages:()=>f,getOAuthUrl:()=>u,getProxySettings:()=>_,importAccounts:()=>p,patchAccount:()=>s,updateAISettings:()=>g,updateAccountSettings:()=>l,updateDeviceName:()=>m,updateProxySettings:()=>v});function r(){return t.get(`/api/accounts`)}function i(){return t.get(`/api/accounts/active`)}function a(e){return t.post(`/api/accounts`,e)}function o(e){return t.del(`/api/accounts/${e}`)}function s(e,n){return t.patch(`/api/accounts/${e}`,n)}function c(){return t.get(`/api/accounts/settings`)}function l(e){return t.put(`/api/accounts/settings`,e)}function u(){return t.get(`/api/accounts/oauth/url`)}function d(e,n){return t.post(`/api/accounts/oauth/exchange`,{code:e,state:n})}function f(){return t.get(`/api/accounts/usage`)}function p(e){return t.post(`/api/accounts/import`,e)}function m(e){return t.put(`/api/settings/device-name`,{device_name:e})}function h(){return t.get(`/api/settings/ai`)}function g(e){return t.put(`/api/settings/ai`,e)}function _(){return t.get(`/api/settings/proxy`)}function v(e){return t.put(`/api/settings/proxy`,e)}export{h as a,i as c,_ as d,p as f,v as g,l as h,d as i,f as l,g as m,n,c as o,s as p,o as r,r as s,a as t,u};