@stigmer/react 1.0.3 → 2.0.0

package/src/billing/__tests__/CreditLedgerTable.test.tsx

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { LedgerEntryType, LedgerView } from "@stigmer/protos/ai/stigmer/billing/v1/enum_pb";
+import { StigmerContext } from "../../context";
+import { FetchCacheContext } from "../../internal/FetchCacheProvider";
+import { CreditLedgerTable } from "../CreditLedgerTable";
+
+function createMockStigmer(getCreditLedger: (...args: unknown[]) => Promise<unknown>) {
+  return {
+    billing: { getCreditLedger },
+  } as never;
+}
+
+function wrapper(client: unknown) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <FetchCacheContext.Provider value={null}>
+        <StigmerContext.Provider value={client as never}>
+          {children}
+        </StigmerContext.Provider>
+      </FetchCacheContext.Provider>
+    );
+  };
+}
+
+function ledgerEntry(overrides: Record<string, unknown> = {}) {
+  return {
+    entryId: "led-1",
+    type: LedgerEntryType.purchase_credit,
+    amountMicros: 50_000_000n,
+    balanceAfterMicros: 50_000_000n,
+    createdAt: { seconds: 1_750_000_000n },
+    ...overrides,
+  };
+}
+
+describe("CreditLedgerTable", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("requests the server-resolved statement view with a 0-based page number", async () => {
+    const getCreditLedger = vi
+      .fn()
+      .mockResolvedValue({ entries: [ledgerEntry()], totalPages: 1 });
+
+    render(<CreditLedgerTable orgId="org-1" />, {
+      wrapper: wrapper(createMockStigmer(getCreditLedger)),
+    });
+
+    await waitFor(() => expect(getCreditLedger).toHaveBeenCalled());
+
+    const arg = getCreditLedger.mock.calls[0]![0] as {
+      view: LedgerView;
+      page: { num: number };
+      typeFilter?: unknown;
+    };
+    // Intent is expressed as a server-resolved view — the client must NOT
+    // hand-roll a list of ledger entry types.
+    expect(arg.view).toBe(LedgerView.statement);
+    expect(arg.typeFilter).toBeUndefined();
+    // UI page 1 maps to the 0-based backend page number.
+    expect(arg.page.num).toBe(0);
+  });
+
+  it("renders Date, Type, and Amount columns but not a Balance column", async () => {
+    const getCreditLedger = vi
+      .fn()
+      .mockResolvedValue({ entries: [ledgerEntry()], totalPages: 1 });
+
+    render(<CreditLedgerTable orgId="org-1" />, {
+      wrapper: wrapper(createMockStigmer(getCreditLedger)),
+    });
+
+    await waitFor(() => expect(screen.queryByText("Transaction History")).toBeTruthy());
+
+    const headers = screen
+      .getAllByRole("columnheader")
+      .map((el) => el.textContent);
+    expect(headers).toContain("Type");
+    expect(headers).toContain("Amount");
+    expect(headers).not.toContain("Balance");
+  });
+
+  it("shows the funding-oriented empty state when there are no entries", async () => {
+    const getCreditLedger = vi
+      .fn()
+      .mockResolvedValue({ entries: [], totalPages: 0 });
+
+    render(<CreditLedgerTable orgId="org-1" />, {
+      wrapper: wrapper(createMockStigmer(getCreditLedger)),
+    });
+
+    await waitFor(() => expect(screen.queryByText("No transactions yet")).toBeTruthy());
+    expect(
+      screen.queryByText(/Credit purchases, auto-recharges, and refunds/i),
+    ).toBeTruthy();
+  });
+});

package/src/billing/useCreditLedger.ts

@@ -3,7 +3,10 @@
 import type {
   CreditLedgerResponse,
 } from "@stigmer/protos/ai/stigmer/billing/v1/io_pb";
-import type { LedgerEntryType } from "@stigmer/protos/ai/stigmer/billing/v1/enum_pb";
+import type {
+  LedgerEntryType,
+  LedgerView,
+} from "@stigmer/protos/ai/stigmer/billing/v1/enum_pb";
 import { useStigmer } from "../hooks";
 import { useFetch } from "../internal/useFetch";
 
@@ -29,6 +32,13 @@ export interface UseCreditLedgerOptions {
   readonly pageSize?: number;
   /** Filter to specific ledger entry types. Empty means all types. */
   readonly typeFilter?: LedgerEntryType[];
+  /**
+   * Server-resolved ledger slice. When set to `LedgerView.statement`, the
+   * server returns only customer-facing money-movement entry types and
+   * excludes internal mechanics (per-call usage debits, reservation
+   * holds/releases). Defaults to the full ledger.
+   */
+  readonly view?: LedgerView;
 }
 
 /**
@@ -58,7 +68,7 @@ export function useCreditLedger(
   options: UseCreditLedgerOptions = {},
 ): UseCreditLedgerReturn {
   const stigmer = useStigmer();
-  const { pageNum = 1, pageSize = 20, typeFilter } = options;
+  const { pageNum = 1, pageSize = 20, typeFilter, view } = options;
 
   const typeFilterKey = typeFilter?.join(",") ?? "";
 
@@ -67,11 +77,14 @@ export function useCreditLedger(
       ? () =>
           stigmer.billing.getCreditLedger({
             orgId,
-            page: { num: pageNum, size: pageSize },
+            // The SDK page number is 0-based (matches the proto/backend); the
+            // hook's pageNum is 1-based for ergonomic UI controls.
+            page: { num: pageNum - 1, size: pageSize },
             typeFilter,
+            view,
           })
       : null,
-    [orgId, pageNum, pageSize, typeFilterKey, stigmer],
+    [orgId, pageNum, pageSize, typeFilterKey, view, stigmer],
     null as CreditLedgerResponse | null,
   );
 

package/src/composer/ComposerToolbar.tsx

@@ -20,21 +20,38 @@ export interface ComposerToolbarProps {
   readonly canSend: boolean;
   readonly onSend: () => void;
 
-  // -- Tier 1: Workspace ----------------------------------------------------
+  // -- Left group: Primary state --------------------------------------------
+
+  readonly showHarnessSelector: boolean;
+  readonly harness?: HarnessOption;
+  readonly onHarnessChange: (harness: HarnessOption) => void;
+
+  readonly showInteractionModePicker: boolean;
+  readonly interactionMode?: InteractionModeOption;
+  readonly onInteractionModeChange: (mode: InteractionModeOption) => void;
+
+  readonly showModelSelector: boolean;
+  readonly modelId?: string;
+  readonly onModelChange: (id: string) => void;
+
+  // -- Right group: Secondary actions (icon-only) ---------------------------
 
   readonly showWorkspace: boolean;
   readonly workspaceCount: number;
   /** Pre-built workspace editor content for the popover. */
   readonly workspaceContent: React.ReactNode;
-
-  // -- Tier 1: Attach -------------------------------------------------------
+  /**
+   * When provided, clicking the workspace icon invokes this callback
+   * directly instead of opening the popover. Used when there is only
+   * one possible action (e.g. desktop with zero entries → native folder
+   * dialog) so the user skips the redundant intermediate menu.
+   */
+  readonly onWorkspaceDirectAction?: () => void;
 
   readonly showAttach: boolean;
   readonly attachmentCount: number;
   readonly onAttachClick: () => void;
 
-  // -- Tier 2: Configure menu -----------------------------------------------
-
   readonly configureItems: readonly ConfigureMenuItem[];
   readonly configOpen: boolean;
   readonly onConfigOpenChange: (open: boolean) => void;
@@ -42,39 +59,23 @@ export interface ComposerToolbarProps {
   readonly onConfigActivePanelChange: (panel: string | null) => void;
   /** Render the picker content for a given configure panel id. */
   readonly renderConfigPanel: (itemId: string) => React.ReactNode;
-
-  // -- Harness selector -----------------------------------------------------
-
-  readonly showHarnessSelector: boolean;
-  readonly harness?: HarnessOption;
-  readonly onHarnessChange: (harness: HarnessOption) => void;
-
-  // -- Interaction mode picker ------------------------------------------------
-
-  readonly showInteractionModePicker: boolean;
-  readonly interactionMode?: InteractionModeOption;
-  readonly onInteractionModeChange: (mode: InteractionModeOption) => void;
-
-  // -- Model selector -------------------------------------------------------
-
-  readonly showModelSelector: boolean;
-  readonly modelId?: string;
-  readonly onModelChange: (id: string) => void;
 }
 
 /**
  * Composer toolbar — Zone 3 of the SessionComposer.
  *
- * Renders a two-tier toolbar following the frequency-of-interaction principle:
+ * Layout follows a two-group pattern inspired by Cursor's compact approach:
  *
- * **Tier 1 (always visible):** Workspace, Attach
- * **Tier 2 (behind Configure menu):** Agent, MCP, Skills, Secrets
- * **Right edge:** Runner Picker, Model Selector, Send
+ * **Left group (primary state):** Interaction Mode, Model Selector
+ * **Right group (secondary actions, icon-only):** Workspace, Attach, Configure, Send
  *
- * Workspace precedes Attach because it is the higher-signal context setter
- * (defines the codebase scope for the session). Attach is supplementary.
+ * Primary state indicators retain text labels (users glance at mode and model
+ * frequently). Secondary actions use icon-only buttons with tooltips and
+ * aria-labels — they are actions triggered occasionally, not state to monitor.
  *
- * Separators are placed between conceptual groups using Gestalt proximity.
+ * This separation follows Fitts's Law (related actions clustered near Send),
+ * Gestalt proximity (left = "what," right = "do"), and Nielsen H8 (minimal
+ * visual weight for secondary controls).
  */
 export function ComposerToolbar({
   disabled,
@@ -87,6 +88,7 @@ export function ComposerToolbar({
   showWorkspace,
   workspaceCount,
   workspaceContent,
+  onWorkspaceDirectAction,
   configureItems,
   configOpen,
   onConfigOpenChange,
@@ -103,26 +105,75 @@ export function ComposerToolbar({
   modelId,
   onModelChange,
 }: ComposerToolbarProps) {
-  const hasTier1 = showAttach || showWorkspace;
-  const hasTier2 = configureItems.length > 0;
   const showHarnessSeparate = showHarnessSelector && !showModelSelector;
-  const hasExecParams = showHarnessSeparate || showInteractionModePicker || showModelSelector;
 
   return (
     <div className="flex items-center justify-between gap-2 border-t border-border-muted px-3 py-2">
-      <div className="flex items-center gap-1.5">
-        {/* ---- Tier 1: Input context (Workspace first, then Attach) ---- */}
+      {/* ---- Left group: Primary state (Mode + Model) ---- */}
 
-        {showWorkspace && (
-          <ContextPopover
-            icon={<WorkspaceIcon />}
-            label="Workspace"
-            count={workspaceCount}
+      <div className="flex min-w-0 items-center gap-1.5">
+        {showInteractionModePicker && (
+          <InteractionModePicker
+            value={interactionMode ?? "agent"}
+            onValueChange={onInteractionModeChange}
             disabled={disabled}
-            hideLabel
-          >
-            {workspaceContent}
-          </ContextPopover>
+          />
+        )}
+
+        {showHarnessSeparate && (
+          <HarnessSelector
+            value={harness ?? "native"}
+            onValueChange={onHarnessChange}
+            disabled={disabled}
+          />
+        )}
+
+        {showModelSelector && (
+          <ModelSelector
+            value={modelId}
+            onValueChange={onModelChange}
+            harness={showHarnessSelector ? undefined : harness}
+            initialHarness={showHarnessSelector ? harness : undefined}
+            onHarnessChange={showHarnessSelector ? onHarnessChange : undefined}
+            disabled={disabled}
+          />
+        )}
+      </div>
+
+      {/* ---- Right group: Secondary actions (icon-only) + Send ---- */}
+
+      <div className="flex shrink-0 items-center gap-1">
+        {showWorkspace && (
+          onWorkspaceDirectAction
+            ? <button
+                type="button"
+                disabled={disabled}
+                onClick={onWorkspaceDirectAction}
+                title="Workspace"
+                className={cn(
+                  "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
+                  "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
+                  "disabled:pointer-events-none disabled:opacity-50",
+                )}
+                aria-label="Workspace"
+              >
+                <span className="relative">
+                  <WorkspaceIcon />
+                  {workspaceCount > 0 && (
+                    <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+                      {workspaceCount}
+                    </span>
+                  )}
+                </span>
+              </button>
+            : <ContextPopover
+                icon={<WorkspaceIcon />}
+                label="Workspace"
+                count={workspaceCount}
+                disabled={disabled}
+              >
+                {workspaceContent}
+              </ContextPopover>
         )}
 
         {showAttach && (
@@ -130,31 +181,25 @@ export function ComposerToolbar({
             type="button"
             disabled={disabled}
             onClick={onAttachClick}
+            title="Attach files"
             className={cn(
-              "inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors",
+              "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
               "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
             aria-label="Attach files"
           >
-            <PaperclipIcon />
-            <span className="max-sm:hidden">Attach</span>
-            {attachmentCount > 0 && (
-              <span className="rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary">
-                {attachmentCount}
-              </span>
-            )}
+            <span className="relative">
+              <PaperclipIcon />
+              {attachmentCount > 0 && (
+                <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+                  {attachmentCount}
+                </span>
+              )}
+            </span>
           </button>
         )}
 
-        {/* ---- Separator between Tier 1 and Tier 2 ---- */}
-
-        {hasTier1 && hasTier2 && (
-          <div className="mx-0.5 h-4 w-px bg-border/50" aria-hidden="true" />
-        )}
-
-        {/* ---- Tier 2: Agent configuration (behind Configure menu) ---- */}
-
         <ConfigureMenu
           open={configOpen}
           onOpenChange={onConfigOpenChange}
@@ -165,51 +210,16 @@ export function ComposerToolbar({
           disabled={disabled}
         />
 
-        {/* ---- Separator before execution parameters ---- */}
-
-        {(hasTier1 || hasTier2) && hasExecParams && (
-          <div className="mx-0.5 h-4 w-px bg-border/50" aria-hidden="true" />
-        )}
-
-        {showHarnessSeparate && (
-          <HarnessSelector
-            value={harness ?? "native"}
-            onValueChange={onHarnessChange}
-            disabled={disabled}
-          />
-        )}
-
-        {showInteractionModePicker && (
-          <InteractionModePicker
-            value={interactionMode ?? "agent"}
-            onValueChange={onInteractionModeChange}
-            disabled={disabled}
-          />
-        )}
-
-        {showModelSelector && (
-          <ModelSelector
-            value={modelId}
-            onValueChange={onModelChange}
-            harness={showHarnessSelector ? undefined : harness}
-            initialHarness={showHarnessSelector ? harness : undefined}
-            onHarnessChange={showHarnessSelector ? onHarnessChange : undefined}
-            disabled={disabled}
-          />
-        )}
+        <button
+          type="button"
+          disabled={!canSend}
+          onClick={onSend}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40"
+          aria-label="Send message"
+        >
+          {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}
+        </button>
       </div>
-
-      {/* ---- Send button ---- */}
-
-      <button
-        type="button"
-        disabled={!canSend}
-        onClick={onSend}
-        className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40"
-        aria-label="Send message"
-      >
-        {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}
-      </button>
     </div>
   );
 }

package/src/composer/ConfigureMenu.tsx

@@ -73,26 +73,28 @@ export function ConfigureMenu({
     <Popover.Root open={open} onOpenChange={handleOpenChange}>
       <Popover.Trigger
         disabled={disabled}
+        title="Configure"
         className={cn(
-          "inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors",
+          "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
           "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
           "disabled:pointer-events-none disabled:opacity-50",
         )}
         aria-label="Configure agent, tools, and skills"
       >
-        <ConfigureIcon />
-        <span className="max-sm:hidden">Configure</span>
-        {totalCount > 0 && (
-          <span className="rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary">
-            {totalCount}
-          </span>
-        )}
-        {hasWarning && totalCount === 0 && (
-          <span
-            className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-warning"
-            aria-label="Configuration needed"
-          />
-        )}
+        <span className="relative">
+          <ConfigureIcon />
+          {totalCount > 0 && (
+            <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+              {totalCount}
+            </span>
+          )}
+          {hasWarning && totalCount === 0 && (
+            <span
+              className="absolute -right-0.5 -top-0.5 inline-block h-2 w-2 rounded-full bg-warning"
+              aria-label="Configuration needed"
+            />
+          )}
+        </span>
       </Popover.Trigger>
       <Popover.Portal container={portalContainer}>
         <Popover.Positioner sideOffset={8} align="start">

package/src/composer/ContextChip.tsx

@@ -4,7 +4,7 @@ import { ChipSpinner, XIcon } from "./icons";
 export interface ChipItem {
   key: string;
   label: string;
-  type: "agent" | "workspace" | "mcp" | "skill" | "secret" | "runner";
+  type: "agent" | "workspace" | "mcp" | "skill" | "secret";
   /**
    * Remove handler. When omitted, the chip renders without an X button
    * and with a subtly muted style to signal it is non-removable
@@ -25,7 +25,6 @@ const CHIP_TYPE_LABELS: Record<ChipItem["type"], string> = {
   mcp: "MCP",
   skill: "Skill",
   secret: "1-time",
-  runner: "Runner",
 };
 
 export function ContextChip({

package/src/composer/ContextPopover.tsx

@@ -10,7 +10,6 @@ export function ContextPopover({
   disabled,
   open,
   onOpenChange,
-  hideLabel,
 }: {
   icon: React.ReactNode;
   label: string;
@@ -19,8 +18,6 @@ export function ContextPopover({
   disabled?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  /** When true, hides the text label on small viewports (icon-only). */
-  hideLabel?: boolean;
 }) {
   const portalContainer = useStigmerPortalContainer();
 
@@ -28,19 +25,22 @@ export function ContextPopover({
     <Popover.Root open={open} onOpenChange={onOpenChange}>
       <Popover.Trigger
         disabled={disabled}
+        title={label}
+        aria-label={label}
         className={cn(
-          "inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors",
+          "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
           "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
           "disabled:pointer-events-none disabled:opacity-50",
         )}
       >
-        {icon}
-        <span className={cn(hideLabel && "max-sm:hidden")}>{label}</span>
-        {count > 0 && (
-          <span className="rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary">
-            {count}
-          </span>
-        )}
+        <span className="relative">
+          {icon}
+          {count > 0 && (
+            <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
+              {count}
+            </span>
+          )}
+        </span>
       </Popover.Trigger>
       <Popover.Portal container={portalContainer}>
         <Popover.Positioner sideOffset={8} align="start">