@stigmer/react 0.5.0 → 1.0.0

package/src/session/useSessionSearch.ts

@@ -0,0 +1,149 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import type { SearchResult } from "@stigmer/protos/ai/stigmer/search/v1/io_pb";
+import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
+import { useStigmer } from "../hooks";
+import { useActiveOrgSlug } from "../organization/OrgProvider";
+import { useFetch } from "../internal/useFetch";
+
+/** Options for {@link useSessionSearch}. */
+export interface UseSessionSearchOptions {
+  /** Maximum sessions per page. @default 20 */
+  readonly pageSize?: number;
+}
+
+/** Return value of {@link useSessionSearch}. */
+export interface UseSessionSearchReturn {
+  /** Current page of session entries (lightweight SearchResult projections). */
+  readonly sessions: readonly SearchResult[];
+  /** Total number of sessions matching the query. */
+  readonly totalCount: number;
+  /** Total pages available. */
+  readonly totalPages: number;
+  /** The current page number (1-indexed). */
+  readonly currentPage: number;
+  /** `true` while the initial fetch is in flight. */
+  readonly isLoading: boolean;
+  /** `true` while a background refetch is in flight. */
+  readonly isRefetching: boolean;
+  /** Error from the last failed request, or `null`. */
+  readonly error: Error | null;
+  /** Re-fetch the current page. */
+  readonly refetch: () => void;
+  /** Whether more pages are available. */
+  readonly hasMore: boolean;
+  /** Load the next page (appends to existing sessions). */
+  readonly loadMore: () => void;
+}
+
+const DEFAULT_PAGE_SIZE = 20;
+
+interface SessionSearchData {
+  sessions: SearchResult[];
+  totalCount: number;
+  totalPages: number;
+  currentPage: number;
+}
+
+const INITIAL_DATA: SessionSearchData = {
+  sessions: [],
+  totalCount: 0,
+  totalPages: 0,
+  currentPage: 1,
+};
+
+/**
+ * Data hook that fetches sessions via the SearchService for lightweight,
+ * org-scoped, paginated session listing.
+ *
+ * Unlike {@link useSessionList} which calls the dedicated SessionQueryController.list
+ * RPC (loading full session documents with per-session FGA authorization),
+ * this hook uses the SearchService which returns lightweight `SearchResult`
+ * projections and benefits from the search index's optimized access patterns.
+ *
+ * Supports incremental "load more" pagination — each call to `loadMore()`
+ * fetches the next page and appends results.
+ *
+ * @example
+ * ```tsx
+ * function SessionSidebar() {
+ *   const { sessions, isLoading, hasMore, loadMore } = useSessionSearch();
+ *
+ *   return (
+ *     <ul>
+ *       {sessions.map((s) => <li key={s.id}>{s.description}</li>)}
+ *       {hasMore && <button onClick={loadMore}>Load more</button>}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ */
+export function useSessionSearch(
+  options?: UseSessionSearchOptions,
+): UseSessionSearchReturn {
+  const stigmer = useStigmer();
+  const org = useActiveOrgSlug();
+  const pageSize = options?.pageSize ?? DEFAULT_PAGE_SIZE;
+
+  const [page, setPage] = useState(1);
+  const accumulatedRef = useRef<SearchResult[]>([]);
+
+  const pageRef = useRef(page);
+  pageRef.current = page;
+
+  const fetchFn = org
+    ? async (): Promise<SessionSearchData> => {
+        const currentPage = pageRef.current;
+        const resp = await stigmer.search.query({
+          kinds: [ApiResourceKind.session],
+          org,
+          page: { num: currentPage, size: pageSize },
+        });
+
+        if (currentPage === 1) {
+          accumulatedRef.current = [...resp.entries];
+        } else {
+          accumulatedRef.current = [...accumulatedRef.current, ...resp.entries];
+        }
+
+        return {
+          sessions: accumulatedRef.current,
+          totalCount: resp.totalCount,
+          totalPages: resp.totalPages,
+          currentPage,
+        };
+      }
+    : null;
+
+  const { data, isLoading, isRefetching, error, refetch } = useFetch(
+    fetchFn,
+    [org, pageSize, page, stigmer],
+    INITIAL_DATA,
+  );
+
+  const loadMore = useCallback(() => {
+    if (data.currentPage < data.totalPages) {
+      setPage((p) => p + 1);
+    }
+  }, [data.currentPage, data.totalPages]);
+
+  const fullRefetch = useCallback(() => {
+    accumulatedRef.current = [];
+    setPage(1);
+    refetch();
+  }, [refetch]);
+
+  return {
+    sessions: data.sessions,
+    totalCount: data.totalCount,
+    totalPages: data.totalPages,
+    currentPage: data.currentPage,
+    isLoading,
+    isRefetching,
+    error,
+    refetch: fullRefetch,
+    hasMore: data.currentPage < data.totalPages,
+    loadMore,
+  };
+}

package/src/session/useSessionUsage.ts

@@ -7,7 +7,7 @@ import {
   GetSessionUsageReportInputSchema,
   type GetSessionUsageReportOutput,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/io_pb";
-import type { ModelUsage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/usage_pb";
+import type { ModelUsage, RunnerUsageSummary } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/usage_pb";
 import { useStigmer } from "../hooks";
 import { useFetch } from "../internal/useFetch";
 
@@ -109,6 +109,66 @@ function mapReport(report: GetSessionUsageReportOutput): UseSessionUsageReturn {
   };
 }
 
+/**
+ * Aggregate runner-reported usage from execution status objects.
+ * Used as a fallback when the server-side session usage report is empty
+ * (e.g., Cursor harness where the proxy does not capture main agent turns).
+ */
+function aggregateRunnerUsage(
+  executions: readonly AgentExecution[],
+): UseSessionUsageReturn {
+  let inputTokens = 0;
+  let outputTokens = 0;
+  let cacheReadTokens = 0;
+  let cacheCreationTokens = 0;
+  let totalTokens = 0;
+  let turnCount = 0;
+  let estimatedCost = 0;
+  let model = "";
+
+  for (const exec of executions) {
+    const ru = exec.status?.runnerUsage;
+    if (!ru || ru.turnCount === 0) continue;
+    inputTokens += Number(ru.inputTokens);
+    outputTokens += Number(ru.outputTokens);
+    cacheReadTokens += Number(ru.cacheReadTokens);
+    cacheCreationTokens += Number(ru.cacheWriteTokens);
+    totalTokens += Number(ru.totalTokens);
+    turnCount += ru.turnCount;
+    estimatedCost += ru.estimatedCostUsd;
+    if (!model && ru.model) model = ru.model;
+  }
+
+  if (turnCount === 0) return EMPTY;
+
+  return {
+    totalCostUsd: estimatedCost,
+    totalTokens,
+    inputTokens,
+    outputTokens,
+    cacheReadTokens,
+    cacheCreationTokens,
+    llmCallCount: turnCount,
+    modelBreakdown: model
+      ? [
+          {
+            model,
+            provider: "cursor",
+            estimatedCostUsd: estimatedCost,
+            inputTokens,
+            outputTokens,
+            cacheCreationTokens,
+            cacheReadTokens,
+            callCount: turnCount,
+          },
+        ]
+      : [],
+    primaryModel: model,
+    primaryProvider: model ? "cursor" : "",
+    hasUsage: true,
+  };
+}
+
 /**
  * Usage hook for session-level cost and token aggregation.
  *
@@ -140,8 +200,16 @@ export function useSessionUsage(
     { cacheKey: sessionId ? `session-usage:${sessionId}` : undefined },
   );
 
+  const runnerFallback = useMemo(
+    () => aggregateRunnerUsage(executions),
+    [executions],
+  );
+
   return useMemo(() => {
-    if (!report) return EMPTY;
-    return mapReport(report);
-  }, [report]);
+    if (report) {
+      const mapped = mapReport(report);
+      if (mapped.hasUsage) return mapped;
+    }
+    return runnerFallback;
+  }, [report, runnerFallback]);
 }

package/src/settings/UsageSection.tsx

@@ -1,14 +1,11 @@
 "use client";
 
 import { OrgUsagePanel } from "../usage/OrgUsagePanel";
-import { useDeploymentMode } from "../deployment-mode";
-import { CloudFeatureNotice } from "../internal/CloudFeatureNotice";
 import { useOrg } from "../organization/OrgProvider";
 
 /** Settings section for organization usage and cost reporting. */
 export function UsageSection() {
   const { activeOrg } = useOrg();
-  const mode = useDeploymentMode();
   const orgId = activeOrg?.metadata?.id ?? "";
 
   return (
@@ -24,12 +21,7 @@ export function UsageSection() {
         your organization.
       </p>
 
-      {mode === "local" ? (
-        <CloudFeatureNotice>
-          Usage reports are not available in local mode. Connect to Stigmer
-          Cloud to view organization-level cost and token analytics.
-        </CloudFeatureNotice>
-      ) : !orgId ? (
+      {!orgId ? (
         <p className="text-muted-foreground py-4 text-center text-xs">
           Select an organization to view usage.
         </p>

package/src/skill/SkillPicker.tsx

@@ -15,6 +15,8 @@ import { cn } from "@stigmer/theme";
 import { useSkillSearch } from "./useSkillSearch";
 import { useScrollShadows } from "../internal/useScrollShadows";
 import { ScrollFade } from "../internal/ScrollFade";
+import { ScopeToggle } from "../library/ScopeToggle";
+import type { ResourceListScope } from "../search";
 
 /** Props for {@link SkillPicker}. */
 export interface SkillPickerProps {
@@ -83,7 +85,8 @@ export function SkillPicker({
   disabled,
   className,
 }: SkillPickerProps) {
-  const { results, isLoading, error, query, setQuery } = useSkillSearch(org, { scope });
+  const [activeScope, setActiveScope] = useState<ResourceListScope>(scope ?? "org");
+  const { results, isLoading, error, query, setQuery } = useSkillSearch(org, { scope: activeScope });
 
   const [focusIndex, setFocusIndex] = useState(-1);
   const searchRef = useRef<HTMLInputElement>(null);
@@ -217,6 +220,8 @@ export function SkillPicker({
         autoFocus
       />
 
+      <ScopeToggle value={activeScope} onChange={setActiveScope} disabled={disabled} />
+
       {error && <p className="text-xs text-destructive">{error.message}</p>}
 
       {/* Scrollable results list */}