@gram-ai/elements 1.33.2 → 1.35.0

package/src/components/ui/time-range-picker.stories.tsx

@@ -36,171 +36,214 @@ const meta: Meta<typeof TimeRangePicker> = {
 export default meta;
 type Story = StoryObj<typeof TimeRangePicker>;
 
+function DefaultStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("7d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+
+  return (
+    <TimeRangePicker
+      preset={customRange ? null : preset}
+      customRange={customRange}
+      onPresetChange={(p) => {
+        setPreset(p);
+        setCustomRange(null);
+      }}
+      onCustomRangeChange={(from, to, label) => {
+        setCustomRange({ from, to });
+        setPreset(null);
+        console.log("Custom range:", { from, to, label });
+      }}
+      onClearCustomRange={() => {
+        setCustomRange(null);
+        setPreset("7d");
+      }}
+    />
+  );
+}
+
 /**
  * Default time range picker with preset badges and calendar.
  * Supports natural language input with AI parsing.
  */
 export const Default: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("7d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-
-    return (
-      <TimeRangePicker
-        preset={customRange ? null : preset}
-        customRange={customRange}
-        onPresetChange={(p) => {
-          setPreset(p);
-          setCustomRange(null);
-        }}
-        onCustomRangeChange={(from, to, label) => {
-          setCustomRange({ from, to });
-          setPreset(null);
-          console.log("Custom range:", { from, to, label });
-        }}
-        onClearCustomRange={() => {
-          setCustomRange(null);
-          setPreset("7d");
-        }}
-      />
-    );
-  },
+  render: () => <DefaultStory />,
 };
 
+function WithTimezoneStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("30d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+
+  return (
+    <TimeRangePicker
+      preset={customRange ? null : preset}
+      customRange={customRange}
+      onPresetChange={(p) => {
+        setPreset(p);
+        setCustomRange(null);
+      }}
+      onCustomRangeChange={(from, to) => {
+        setCustomRange({ from, to });
+        setPreset(null);
+      }}
+      onClearCustomRange={() => {
+        setCustomRange(null);
+        setPreset("30d");
+      }}
+      timezone="UTC-08:00"
+    />
+  );
+}
+
 /**
  * Time range picker with timezone indicator.
  */
 export const WithTimezone: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("30d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  render: () => <WithTimezoneStory />,
+};
+
+function WithLiveModeStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("15m");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  const [isLive, setIsLive] = useState(true);
+
+  return (
+    <TimeRangePicker
+      preset={customRange ? null : preset}
+      customRange={customRange}
+      onPresetChange={(p) => {
+        setPreset(p);
+        setCustomRange(null);
+      }}
+      onCustomRangeChange={(from, to) => {
+        setCustomRange({ from, to });
+        setPreset(null);
+      }}
+      onClearCustomRange={() => {
+        setCustomRange(null);
+        setPreset("15m");
+      }}
+      showLive
+      isLive={isLive}
+      onLiveChange={setIsLive}
+    />
+  );
+}
 
-    return (
+/**
+ * With LIVE mode toggle enabled.
+ */
+export const WithLiveMode: Story = {
+  render: () => <WithLiveModeStory />,
+};
+
+/**
+ * Disabled state.
+ */
+export const Disabled: Story = {
+  args: {
+    preset: "7d",
+    disabled: true,
+  },
+};
+
+function DatadogStyleStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("7d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  const [customLabel, setCustomLabel] = useState<string | null>(null);
+  const [isLive, setIsLive] = useState(false);
+
+  return (
+    <div className="space-y-4">
       <TimeRangePicker
         preset={customRange ? null : preset}
         customRange={customRange}
+        customRangeLabel={customLabel}
         onPresetChange={(p) => {
           setPreset(p);
           setCustomRange(null);
+          setCustomLabel(null);
         }}
-        onCustomRangeChange={(from, to) => {
+        onCustomRangeChange={(from, to, label) => {
           setCustomRange({ from, to });
           setPreset(null);
+          setCustomLabel(label || null);
         }}
         onClearCustomRange={() => {
           setCustomRange(null);
-          setPreset("30d");
+          setPreset("7d");
+          setCustomLabel(null);
         }}
+        showLive
+        isLive={isLive}
+        onLiveChange={setIsLive}
         timezone="UTC-08:00"
       />
-    );
-  },
-};
+      <div className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
+        <strong>Current state:</strong>
+        <pre className="mt-1 overflow-auto">
+          {JSON.stringify(
+            {
+              preset,
+              customRange: customRange
+                ? {
+                    from: customRange.from.toISOString(),
+                    to: customRange.to.toISOString(),
+                  }
+                : null,
+              customLabel,
+              isLive,
+            },
+            null,
+            2,
+          )}
+        </pre>
+      </div>
+    </div>
+  );
+}
 
 /**
- * With LIVE mode toggle enabled.
+ * Full Datadog-style configuration with all features.
+ * Type natural language like "3 days ago", "last Wednesday", "past 2 weeks".
  */
-export const WithLiveMode: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("15m");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-    const [isLive, setIsLive] = useState(true);
+export const DatadogStyle: Story = {
+  render: () => <DatadogStyleStory />,
+};
 
-    return (
+function NaturalLanguageParsingStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("30d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  const [customLabel, setCustomLabel] = useState<string | null>(null);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        Try typing: "yesterday", "3 days ago", "last Wednesday", "January"
+      </p>
       <TimeRangePicker
         preset={customRange ? null : preset}
         customRange={customRange}
+        customRangeLabel={customLabel}
         onPresetChange={(p) => {
           setPreset(p);
           setCustomRange(null);
+          setCustomLabel(null);
         }}
-        onCustomRangeChange={(from, to) => {
+        onCustomRangeChange={(from, to, label) => {
           setCustomRange({ from, to });
           setPreset(null);
+          setCustomLabel(label || null);
+          console.log("AI parsed:", { from, to, label });
         }}
         onClearCustomRange={() => {
           setCustomRange(null);
-          setPreset("15m");
+          setPreset("30d");
+          setCustomLabel(null);
         }}
-        showLive
-        isLive={isLive}
-        onLiveChange={setIsLive}
       />
-    );
-  },
-};
-
-/**
- * Disabled state.
- */
-export const Disabled: Story = {
-  args: {
-    preset: "7d",
-    disabled: true,
-  },
-};
-
-/**
- * Full Datadog-style configuration with all features.
- * Type natural language like "3 days ago", "last Wednesday", "past 2 weeks".
- */
-export const DatadogStyle: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("7d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-    const [customLabel, setCustomLabel] = useState<string | null>(null);
-    const [isLive, setIsLive] = useState(false);
-
-    return (
-      <div className="space-y-4">
-        <TimeRangePicker
-          preset={customRange ? null : preset}
-          customRange={customRange}
-          customRangeLabel={customLabel}
-          onPresetChange={(p) => {
-            setPreset(p);
-            setCustomRange(null);
-            setCustomLabel(null);
-          }}
-          onCustomRangeChange={(from, to, label) => {
-            setCustomRange({ from, to });
-            setPreset(null);
-            setCustomLabel(label || null);
-          }}
-          onClearCustomRange={() => {
-            setCustomRange(null);
-            setPreset("7d");
-            setCustomLabel(null);
-          }}
-          showLive
-          isLive={isLive}
-          onLiveChange={setIsLive}
-          timezone="UTC-08:00"
-        />
-        <div className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
-          <strong>Current state:</strong>
-          <pre className="mt-1 overflow-auto">
-            {JSON.stringify(
-              {
-                preset,
-                customRange: customRange
-                  ? {
-                      from: customRange.from.toISOString(),
-                      to: customRange.to.toISOString(),
-                    }
-                  : null,
-                customLabel,
-                isLive,
-              },
-              null,
-              2,
-            )}
-          </pre>
-        </div>
-      </div>
-    );
-  },
-};
+    </div>
+  );
+}
 
 /**
  * Natural language parsing demo.
@@ -212,38 +255,5 @@ export const DatadogStyle: Story = {
  * - "January 2024"
  */
 export const NaturalLanguageParsing: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("30d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-    const [customLabel, setCustomLabel] = useState<string | null>(null);
-
-    return (
-      <div className="space-y-4">
-        <p className="text-sm text-muted-foreground">
-          Try typing: "yesterday", "3 days ago", "last Wednesday", "January"
-        </p>
-        <TimeRangePicker
-          preset={customRange ? null : preset}
-          customRange={customRange}
-          customRangeLabel={customLabel}
-          onPresetChange={(p) => {
-            setPreset(p);
-            setCustomRange(null);
-            setCustomLabel(null);
-          }}
-          onCustomRangeChange={(from, to, label) => {
-            setCustomRange({ from, to });
-            setPreset(null);
-            setCustomLabel(label || null);
-            console.log("AI parsed:", { from, to, label });
-          }}
-          onClearCustomRange={() => {
-            setCustomRange(null);
-            setPreset("30d");
-            setCustomLabel(null);
-          }}
-        />
-      </div>
-    );
-  },
+  render: () => <NaturalLanguageParsingStory />,
 };

package/src/components/ui/time-range-picker.test.ts

@@ -0,0 +1,57 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Capture the options passed to createOpenRouter so we can assert on the
+// auth headers / baseURL the date picker sends to /chat/completions.
+const createOpenRouterMock = vi.fn();
+
+vi.mock("@openrouter/ai-sdk-provider", () => ({
+  createOpenRouter: (opts: { headers?: Record<string, string> }) => {
+    createOpenRouterMock(opts);
+    return { chat: () => ({}) };
+  },
+}));
+
+vi.mock("ai", () => ({
+  generateObject: vi.fn(async () => ({
+    object: {
+      from: "2026-01-01T00:00:00",
+      to: "2026-01-01T23:59:59",
+      label: "Jan 1",
+    },
+  })),
+}));
+
+// Avoid pulling Datadog RUM (and its window access) into the Node test env.
+vi.mock("@/lib/errorTracking", () => ({ trackError: vi.fn() }));
+
+import { parseWithAI } from "./time-range-picker";
+
+describe("parseWithAI request auth", () => {
+  beforeEach(() => {
+    createOpenRouterMock.mockClear();
+  });
+
+  // Root-cause regression test: the /chat/completions proxy authenticates from
+  // request headers, so the session credential MUST be forwarded. Before the
+  // fix, parseWithAI sent only Gram-Project and relied on a cookie, so this
+  // header was absent and the request 401'd (silently).
+  it("forwards the session auth header and baseURL to the OpenRouter client", async () => {
+    await parseWithAI("yesterday", "https://app.getgram.ai", "proj-slug", {
+      "Gram-Session": "test-token",
+    });
+
+    expect(createOpenRouterMock).toHaveBeenCalledTimes(1);
+    const opts = createOpenRouterMock.mock.calls[0]![0];
+    expect(opts.baseURL).toBe("https://app.getgram.ai");
+    expect(opts.headers["Gram-Session"]).toBe("test-token");
+    expect(opts.headers["Gram-Project"]).toBe("proj-slug");
+  });
+
+  it("still sets Gram-Project when no auth headers are provided", async () => {
+    await parseWithAI("yesterday", "https://app.getgram.ai", "proj-slug");
+
+    const opts = createOpenRouterMock.mock.calls[0]![0];
+    expect(opts.headers["Gram-Project"]).toBe("proj-slug");
+    expect(opts.headers["Gram-Session"]).toBeUndefined();
+  });
+});

package/src/components/ui/time-range-picker.tsx

@@ -6,6 +6,7 @@ import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 import { z } from "zod";
 
 import { cn } from "@/lib/utils";
+import { trackError } from "@/lib/errorTracking";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Calendar } from "./calendar";
 
@@ -154,7 +155,7 @@ const BADGE_WIDTH = "min-w-10";
 
 export function getPresetRange(preset: DateRangePreset): TimeRange {
   const p = PRESETS.find((p) => p.value === preset);
-  return p ? p.getRange() : PRESETS[5].getRange(); // Default to 3d
+  return p ? p.getRange() : PRESETS[5]!.getRange(); // Default to 3d
 }
 
 function getPresetByValue(value: DateRangePreset): TimeRangePreset | undefined {
@@ -187,11 +188,15 @@ function parseAsLocalDate(isoString: string): Date {
   // Try to extract just the date part and create a local date
   const dateMatch = isoString.match(/^(\d{4})-(\d{2})-(\d{2})/);
   if (dateMatch) {
-    const [, year, month, day] = dateMatch;
+    const year = dateMatch[1]!;
+    const month = dateMatch[2]!;
+    const day = dateMatch[3]!;
     // Check if there's a time component
     const timeMatch = isoString.match(/T(\d{2}):(\d{2}):?(\d{2})?/);
     if (timeMatch) {
-      const [, hours, minutes, seconds = "0"] = timeMatch;
+      const hours = timeMatch[1]!;
+      const minutes = timeMatch[2]!;
+      const seconds = timeMatch[3] ?? "0";
       return new Date(
         parseInt(year),
         parseInt(month) - 1,
@@ -208,16 +213,23 @@ function parseAsLocalDate(isoString: string): Date {
   return new Date(isoString);
 }
 
-async function parseWithAI(
+// Exported for unit testing of header/credential construction.
+export async function parseWithAI(
   input: string,
   apiUrl: string,
   projectSlug?: string,
+  authHeaders?: Record<string, string>,
 ): Promise<ParseResult> {
   try {
     const now = new Date();
 
-    // Create OpenRouter provider without X-Gram-Source header (so usage is billed)
-    const headers: Record<string, string> = {};
+    // Create OpenRouter provider without X-Gram-Source header (so usage is billed).
+    // authHeaders carries the caller's session credential (e.g. Gram-Session /
+    // Gram-Chat-Session). The /chat/completions proxy authenticates from these
+    // request headers — relying on cookies alone fails (the Vercel AI SDK does
+    // not forward them reliably), so a missing credential here 401s and the
+    // catch below would silently swallow it.
+    const headers: Record<string, string> = { ...authHeaders };
     if (projectSlug) {
       headers["Gram-Project"] = projectSlug;
     }
@@ -290,7 +302,15 @@ User input: ${input}`,
 
     // Use the semantic label from AI (e.g., "Mon", "Jan", "2024", "1/5-1/10")
     return { type: "custom", range: { from, to }, label: parsed.label };
-  } catch {
+  } catch (error) {
+    // Returning null keeps the UI graceful on an unparseable string, but the
+    // failure must not be invisible — a 401/gateway error here looks identical
+    // to "couldn't parse" to the user. Surface it so it's diagnosable.
+    trackError(error, {
+      source: "custom",
+      location: "TimeRangePicker.parseWithAI",
+      hasAuthHeaders: Boolean(authHeaders),
+    });
     return null;
   }
 }
@@ -328,6 +348,13 @@ export interface TimeRangePickerProps {
   apiUrl?: string;
   /** Project slug for API authentication */
   projectSlug?: string;
+  /**
+   * Auth headers to send with the AI parsing request to /chat/completions
+   * (e.g. `{ "Gram-Session": token }`). The `/chat/completions` proxy
+   * authenticates from request headers, not cookies, so without these the
+   * request is rejected with 401 and natural-language parsing silently fails.
+   */
+  authHeaders?: Record<string, string>;
   /** Additional class name for the trigger */
   className?: string;
 }
@@ -347,8 +374,9 @@ function TimeRangePicker({
   timezone,
   apiUrl,
   projectSlug,
+  authHeaders,
   className,
-}: TimeRangePickerProps) {
+}: TimeRangePickerProps): React.JSX.Element {
   const [isOpen, setIsOpen] = React.useState(false);
   const [showCalendar, setShowCalendar] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
@@ -441,6 +469,7 @@ function TimeRangePicker({
           inputValue,
           effectiveApiUrl,
           projectSlug,
+          authHeaders,
         );
         applyParseResult(aiParsed);
       } finally {
@@ -560,7 +589,9 @@ function TimeRangePicker({
             onClick={handleInputClick}
             onFocus={handleInputFocus}
             onBlur={handleInputBlur}
-            onKeyDown={handleInputKeyDown}
+            onKeyDown={(e) => {
+              void handleInputKeyDown(e);
+            }}
             placeholder="e.g., 3 days ago, last week..."
             disabled={disabled}
             className={cn(

package/src/components/ui/tool-ui.tsx

@@ -159,7 +159,11 @@ function isStructuredContent(
  * Helper Components
  * -------------------------------------------------------------------------- */
 
-function StatusIndicator({ status }: { status: ToolStatus }) {
+function StatusIndicator({
+  status,
+}: {
+  status: ToolStatus;
+}): React.JSX.Element {
   return (
     <div className={cn(statusVariants({ status }))}>
       {status === "pending" && null}
@@ -173,7 +177,7 @@ function StatusIndicator({ status }: { status: ToolStatus }) {
   );
 }
 
-function CopyButton({ content }: { content: string }) {
+function CopyButton({ content }: { content: string }): React.JSX.Element {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async (e: React.MouseEvent) => {
@@ -185,7 +189,9 @@ function CopyButton({ content }: { content: string }) {
 
   return (
     <button
-      onClick={handleCopy}
+      onClick={(e) => {
+        void handleCopy(e);
+      }}
       className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
       aria-label="Copy to clipboard"
     >
@@ -226,7 +232,7 @@ function SyntaxHighlightedCode({
   text: string;
   language?: BundledLanguage;
   className?: string;
-}) {
+}): React.JSX.Element {
   const [highlightedCode, setHighlightedCode] = useState<string | null>(null);
   const [expanded, setExpanded] = useState(false);
 
@@ -241,7 +247,7 @@ function SyntaxHighlightedCode({
     setHighlightedCode(null);
     if (!language || !canHighlight) return;
     let cancelled = false;
-    codeToHtml(displayText, {
+    void codeToHtml(displayText, {
       lang: language,
       theme: "github-dark-default",
       rootStyle: "background-color: transparent;",
@@ -370,7 +376,7 @@ function ToolUISection({
   defaultExpanded = false,
   highlightSyntax = true,
   language = "json",
-}: ToolUISectionProps) {
+}: ToolUISectionProps): React.JSX.Element {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   // For structured content, we don't stringify it
@@ -434,7 +440,7 @@ function ToolUI({
   onApproveOnce,
   onApproveForSession,
   onDeny,
-}: ToolUIProps) {
+}: ToolUIProps): React.JSX.Element {
   // Use annotation title if available, otherwise fall back to name
   const displayName = annotations?.title || name;
   const isApprovalPending =
@@ -455,6 +461,7 @@ function ToolUI({
     if (!isApprovalPending && isExpanded && !defaultExpanded) {
       setIsExpanded(false);
     }
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- only react to approval transition; defaultExpanded/isExpanded are intentionally not deps
   }, [isApprovalPending]);
 
   // Handle approve based on selected mode
@@ -497,7 +504,9 @@ function ToolUI({
 
       {/* Tool row */}
       <button
-        onClick={() => hasContent && setIsExpanded(!isExpanded)}
+        onClick={() => {
+          if (hasContent) setIsExpanded(!isExpanded);
+        }}
         disabled={!hasContent}
         className={cn(
           "flex w-full items-center gap-2 px-4 py-3 text-left",
@@ -715,7 +724,7 @@ function ToolUIGroup({
   defaultExpanded = false,
   children,
   className,
-}: ToolUIGroupProps) {
+}: ToolUIGroupProps): React.JSX.Element {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   return (

package/src/components/ui/tooltip.tsx

@@ -9,7 +9,7 @@ import { usePortalContainer } from "@/hooks/usePortalContainer";
 function TooltipProvider({
   delayDuration = 0,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element {
   return (
     <TooltipPrimitive.Provider
       data-slot="tooltip-provider"
@@ -21,7 +21,7 @@ function TooltipProvider({
 
 function Tooltip({
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -31,7 +31,7 @@ function Tooltip({
 
 function TooltipTrigger({
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
@@ -43,7 +43,7 @@ function TooltipContent({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
   container?: HTMLElement | null;
-}) {
+}): React.JSX.Element {
   const portalContainer = usePortalContainer();
   return (
     <TooltipPrimitive.Portal container={container ?? portalContainer}>

package/src/contexts/ChatIdContext.tsx

@@ -12,7 +12,7 @@ export const ChatIdContext = createContext<ChatIdContextValue | null>(null);
  *
  * @returns The current chat ID, or null if not yet initialized
  */
-export const useChatId = () => {
+export const useChatId = (): string | null => {
   const context = useContext(ChatIdContext);
   if (!context) {
     throw new Error("useChatId must be used within ElementsProvider");