fix(usage): repair the chart family's shared geometry and the audit export

Follow-up review of the previous commit, across the whole diff.

The CSV export ignored the workspace filter. The contract accepted it, the
on-screen feed applied it, and the export route dropped it on the floor — every
field of `AuditLogFilterParams` is optional, so omitting one still type-checks.
An admin exporting a workspace-scoped feed downloaded the whole organization,
under a truncation warning that blamed the date range. The route now forwards
the parsed query whole and refuses an out-of-organization id the way the list
route does, with tests for both.

The line chart's derived hover index was not clamped. The previous commit
replaced stored state with a derivation, but reproduced the clamp only for the
bar chart: `padding.left` follows the axis labels and `chartWidth` follows the
container, so a sidebar collapse mid-hover pushed the ratio past 1 and indexed
off the end — the dot, the rule and the tooltip all vanished until the cursor
moved.

Per-chart gutters de-aligned the logs dashboard, where three line charts sit in
one row. Deriving each from its own labels put their plot origins at 26, 27 and
32 where they had shared one. The gutter now rounds up to a step, which collapses
differences that small and leaves several pixels of slack instead of the
sub-pixel margin `Math.ceil` alone gave.

The radar chart, reviewed against its siblings:

- Its hover targets were triangles, whose far edge is the chord. Along its own
  spoke a triangle reaches only `reach·cos(π/n)` — at three axes, 50px against a
  74px radius — so the largest value's vertex, the one a reader aims at, sat
  outside every target. They are arc sectors now.
- The tooltip was positioned against the scroll container rather than the plot,
  so below the width floor it stayed nailed while the web slid under it. It now
  sits beside the hovered vertex through the family's own placer, instead of
  covering the densest part of the gradient.
- Captions below the centreline rode ~3px off the ring rather than the gap they
  were given, and captions beside the web were misaligned from their own vertex.
- Web opacities, stroke width, vertex radius, the per-theme fill relationship and
  the `screen` blend now match the bar and line charts rather than freelancing.
- Its rings read the shared grid fractions instead of dividing into even steps
  that agreed with the siblings only by coincidence.

Also: one `expanded` flag drove both lists in the workspace drill-down, so
opening either tail silently opened the other's; the Overview and tab lists
rendered an inert `Other` row while the same row two clicks away was a button;
the expand chevron knocked the value column out of alignment; row hover had
regressed to the chip surface where every other settings row uses the active
one; and the radar and the list beside it printed two different `Other (N more)`
counts under identical wording. The Overview's two readings of the source data
now share one section rather than drawing two half-width rules on one line.

Rendered-geometry tests cover the clipping and caption bugs against the real
SVG — a unit test of the helpers could not have caught either, since both came
from a callsite combining correct helpers wrongly.

Author: waleedlatif1

apps/sim/app/api/audit-logs/export/route.test.ts

@@ -164,4 +164,29 @@ describe('GET /api/audit-logs/export', () => {
     expect(response.status).toBe(400)
     expect(mockQueryAuditLogs).not.toHaveBeenCalled()
   })
+
+  /**
+   * The export has to filter by everything the on-screen feed does. It did not
+   * forward `workspaceId`, so an admin exporting from a workspace-scoped feed
+   * downloaded the whole organization — silently, because every field of
+   * `AuditLogFilterParams` is optional and dropping one still type-checks.
+   */
+  it('forwards the workspace filter the on-screen feed applies', async () => {
+    mockGetOrgWorkspaceIds.mockResolvedValue(['workspace-1'])
+
+    await GET(makeRequest('?workspaceId=workspace-1'))
+
+    expect(mockBuildFilterConditions).toHaveBeenCalledWith(
+      expect.objectContaining({ workspaceId: 'workspace-1' })
+    )
+  })
+
+  it('rejects a workspaceId outside the organization, as the list route does', async () => {
+    mockGetOrgWorkspaceIds.mockResolvedValue(['workspace-1'])
+
+    const response = await GET(makeRequest('?workspaceId=workspace-elsewhere'))
+
+    expect(response.status).toBe(400)
+    expect(mockQueryAuditLogs).not.toHaveBeenCalled()
+  })
 })

apps/sim/app/api/audit-logs/export/route.ts

@@ -66,8 +66,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
     }
 
     const { organizationId, orgMemberIds } = authResult.context
-    const { search, action, resourceType, actorId, startDate, endDate, includeDeparted } =
-      parsed.data.query
+    const { actorId, workspaceId, includeDeparted } = parsed.data.query
 
     if (actorId && !orgMemberIds.includes(actorId)) {
       return NextResponse.json(
@@ -77,20 +76,34 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
     }
 
     const orgWorkspaceIds = await getOrgWorkspaceIds(organizationId)
+    /**
+     * The same refusal `listAuditLogs` gives. The scope predicate already makes an
+     * out-of-organization id return nothing, but an empty CSV and a 400 that names the
+     * problem are very different answers to the same bad request, and the two paths
+     * disagreeing about which one you get is what an audit trail cannot afford.
+     */
+    if (workspaceId && !orgWorkspaceIds.includes(workspaceId)) {
+      return NextResponse.json(
+        { error: 'workspaceId does not belong to your organization' },
+        { status: 400 }
+      )
+    }
     const scopeCondition = buildOrgScopeCondition({
       organizationId,
       orgWorkspaceIds,
       orgMemberIds,
       includeDeparted,
     })
-    const filterConditions = buildFilterConditions({
-      action,
-      resourceType,
-      actorId,
-      search,
-      startDate,
-      endDate,
-    })
+    /**
+     * The whole parsed query, not a hand-listed subset.
+     *
+     * Every field of `AuditLogFilterParams` is optional, so dropping one type-checks
+     * silently — which is how `workspaceId` came to be accepted by the contract,
+     * honoured by the list route, and ignored here: an admin looking at one
+     * workspace's feed downloaded the entire organization's, under a truncation
+     * warning that blamed the date range.
+     */
+    const filterConditions = buildFilterConditions(parsed.data.query)
     const conditions = [scopeCondition, ...filterConditions]
 
     const rows: ReturnType<typeof formatAuditLogEntry>[] = []

apps/sim/app/workspace/[workspaceId]/settings/components/billing/components/usage-limit-field/usage-limit-field.tsx

@@ -135,7 +135,6 @@ export function UsageLimitField({
               : String(dollarsToCredits(currentLimit))
         }
         disabled={!canEdit}
-        inputClassName='[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
       />
     </SettingsSection>
   )

apps/sim/components/charts/bar-chart.tsx

@@ -117,12 +117,9 @@ function BarChartComponent({
   const barWidth = Math.max(1, Math.min(24, slot * 0.7))
 
   /**
-   * The hovered bucket, derived from the stored cursor rather than stored beside it.
-   *
-   * Bars own a slot, so this is which slot the cursor is in — not the nearest sample,
-   * which is how a line chart resolves it. Deriving it means a resize mid-hover cannot
-   * leave an index that disagrees with the slot geometry it was measured against, and
-   * a mouse move writes one state instead of two.
+   * Bars own a slot, so the hovered bucket is which slot the cursor is in — not the
+   * nearest sample, which is how a line chart resolves it. Derived, so a resize
+   * mid-hover cannot leave an index disagreeing with the slot geometry.
    */
   const hoverIndex =
     hoverPos === null || data.length === 0 || slot <= 0
@@ -203,12 +200,6 @@ function BarChartComponent({
           contradicted the constant's own note that the chart "scrolls rather than
           compresses". At or above the floor there is no overflow and nothing changes.
         */
-        /*
-          `overflow-y-hidden` is not redundant with `overflow-x-auto`: a computed
-          `overflow-x` other than `visible` promotes `overflow-y: visible` to `auto`,
-          so the tooltip's shadow reaching the foot of the box raised a vertical
-          scrollbar over the chart whenever the cursor neared the axis.
-        */
         'w-full overflow-x-auto overflow-y-hidden',
         !hasExternalWrapper && 'rounded-lg border bg-[var(--surface-1)] p-4 shadow-card'
       )}

apps/sim/components/charts/chart-geometry.test.ts

@@ -83,19 +83,32 @@ describe('chartPlotBand', () => {
 })
 
 describe('resolveChartPadding', () => {
-  /**
-   * The bug this exists for: a fixed 26px gutter left 18px of drawable width once
-   * `CHART_AXIS_LABEL_GAP` was taken out, and a right-anchored `7.3k` at 9px is wider
-   * than that — so its first glyph was cut off at the container's left edge.
-   */
   it('widens the gutter until the longest label fits beside the axis', () => {
     const { left } = resolveChartPadding(['7.3k', '0'])
     expect(left).toBeGreaterThanOrEqual(estimateAxisLabelWidth('7.3k') + CHART_AXIS_LABEL_GAP)
   })
 
-  it('never narrows below the shared padding, so short labels stay aligned', () => {
-    expect(resolveChartPadding(['0', '0']).left).toBe(CHART_PADDING.left)
-    expect(resolveChartPadding([]).left).toBe(CHART_PADDING.left)
+  it('never narrows below the shared padding', () => {
+    expect(resolveChartPadding(['0', '0']).left).toBeGreaterThanOrEqual(CHART_PADDING.left)
+    expect(resolveChartPadding([]).left).toBeGreaterThanOrEqual(CHART_PADDING.left)
+  })
+
+  /**
+   * Three charts sit side by side on the logs dashboard. A gutter derived exactly from
+   * each one's own labels put their plot origins at 26, 27 and 32 — visibly ragged
+   * across a row that used to share one origin.
+   */
+  it('resolves labels of similar width to the same gutter', () => {
+    const gutters = [['5'], ['1.2s'], ['12.3k'], ['0'], ['7.3k']].map(
+      (labels) => resolveChartPadding(labels).left
+    )
+    expect(new Set(gutters).size).toBe(1)
+  })
+
+  it('still grows for a genuinely wider label', () => {
+    expect(resolveChartPadding(['123456.7m']).left).toBeGreaterThan(
+      resolveChartPadding(['7.3k']).left
+    )
   })
 
   it('leaves the other three sides on the shared constant', () => {
@@ -104,10 +117,4 @@ describe('resolveChartPadding', () => {
     expect(padding.right).toBe(CHART_PADDING.right)
     expect(padding.bottom).toBe(CHART_PADDING.bottom)
   })
-
-  it('grows monotonically with label length', () => {
-    const short = resolveChartPadding(['1.2k']).left
-    const long = resolveChartPadding(['123456.7m']).left
-    expect(long).toBeGreaterThan(short)
-  })
 })

apps/sim/components/charts/chart-geometry.ts

@@ -15,16 +15,38 @@ export type ChartPadding = { top: number; right: number; bottom: number; left: n
 /** Matches the loader placeholders callers size themselves against. */
 export const CHART_DEFAULT_HEIGHT = 166
 
-/** Below this the axis labels collide, so the chart scrolls rather than compresses. */
+/**
+ * Below this the axis labels collide, so the chart scrolls rather than compresses.
+ *
+ * Consumers pair `overflow-x-auto` with `overflow-y-hidden`: a computed `overflow-x`
+ * other than `visible` promotes `overflow-y: visible` to `auto`, so the tooltip's
+ * shadow reaching the foot of the box raised a vertical scrollbar over the chart
+ * whenever the cursor neared the axis.
+ */
 export const CHART_MIN_WIDTH = 280
 
 export const CHART_TICK_FILL = 'var(--text-tertiary)'
 export const CHART_TICK_FONT_SIZE = 9
 export const CHART_GRID_FRACTIONS = [0.25, 0.5, 0.75] as const
 
+/** Punctuation and whitespace, which sit near half the width of a digit or letter. */
+const NARROW_GLYPH = /[.,:\s]/
+
 /** Gap between a y-axis tick label's right edge and the axis rule. */
 export const CHART_AXIS_LABEL_GAP = 8
 
+/**
+ * The gutter is rounded up to a multiple of this.
+ *
+ * Charts are read side by side — the logs dashboard puts three in one row — and a
+ * gutter derived exactly from each chart's own labels made `5`, `1.2s` and `12.3k`
+ * resolve to 26, 27 and 32, so three plots that used to share an origin no longer
+ * did. Quantizing collapses differences this small to one value while still growing
+ * for a genuinely wider label, and it turns the sub-pixel slack that `Math.ceil`
+ * alone left into several pixels.
+ */
+const CHART_AXIS_GUTTER_STEP = 8
+
 /**
  * Rendered width of a right-anchored y-axis tick label.
  *
@@ -37,7 +59,7 @@ export const CHART_AXIS_LABEL_GAP = 8
 export function estimateAxisLabelWidth(text: string): number {
   let width = 0
   for (const character of text) {
-    width += /[.,:\s]/.test(character) ? 0.3 : 0.58
+    width += NARROW_GLYPH.test(character) ? 0.3 : 0.58
   }
   return width * CHART_TICK_FONT_SIZE
 }
@@ -54,9 +76,10 @@ export function estimateAxisLabelWidth(text: string): number {
  */
 export function resolveChartPadding(yAxisLabels: readonly string[]): ChartPadding {
   const widest = yAxisLabels.reduce((max, label) => Math.max(max, estimateAxisLabelWidth(label)), 0)
+  const required = Math.max(CHART_PADDING.left, widest + CHART_AXIS_LABEL_GAP)
   return {
     ...CHART_PADDING,
-    left: Math.max(CHART_PADDING.left, Math.ceil(widest) + CHART_AXIS_LABEL_GAP),
+    left: Math.ceil(required / CHART_AXIS_GUTTER_STEP) * CHART_AXIS_GUTTER_STEP,
   }
 }