fix(usage): correct chart clipping, expand truncated rows, add source mix

Two rendering defects on the organization usage panel, plus the follow-on
cleanup they surfaced.

The y-axis maximum was clipped at the container's left edge. The chart family
used a fixed 26px left gutter, which leaves 18px of drawable width once the
label gap is taken out — four narrow glyphs — so every tick from `7.3k` up lost
its first character. Both charts now derive the gutter from the labels they are
about to draw, through one shared `resolveChartPadding` so a bar and a line
chart still line up when stacked.

Hovering near the foot of the plot raised a vertical scrollbar over the chart.
The scroll container sets `overflow-x`, which promotes `overflow-y` to `auto`,
and the tooltip's vertical clamp was a fixed inset that ignored the box's real
height. The clamp now measures the tooltip, and the container pins `overflow-y`.

Also on the panel:

- The axis rules were invisible. `hsl(var(--border))` is unparseable — the token
  is a hex — so the presentation attribute was dropped and SVG's initial
  `stroke: none` applied.
- GLM rendered without a mark: the settings provider-icon map held 11 of the
  registry's 24 providers. Completed, with a test that fails when the two drift.
  The server's parallel label map was the same 11-entry duplicate and now reads
  the registry directly.
- `Other (N more)` opens the tail in place, raising the row limit to the API's
  ceiling. Fixed the drill-down name lookup this exposed, which was pinned to
  the top ten and so refused to open for any row below it.
- A radar chart of the source mix sits beside the Sources list. The rows rank
  the sources; they cannot show whether spend is concentrated or spread.
- "Open logs" pointed at `/workspace/<id>/logs` for a workspace picked from an
  organization-wide list. Organization admin is not workspace membership, so for
  any workspace the admin had not joined it was a one-way trip to an access
  denial. It now opens the organization's audit feed scoped to that workspace,
  which required threading the workspace filter the query builder already
  supported through the internal contract, route, hook, and URL state.
- BYOK is withheld from the tab strip until the ledger carries BYOK rows.
- The chip number field suppresses the native stepper, which painted browser
  chrome inside a flat chip surface. The component owns it, not its callers.
- `ChartColumn` was a uniform 0.86 downscale of its source art, so it rendered
  ~2px small beside every other icon in the settings nav.

Author: waleedlatif1

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

@@ -27,6 +27,7 @@ export const GET = defineInternalJsonRoute({
       action: query.action,
       resourceType: query.resourceType,
       actorId: query.actorId,
+      workspaceId: query.workspaceId,
       startDate: query.startDate,
       endDate: query.endDate,
     },

apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx

@@ -176,7 +176,11 @@ export function SettingsPage({ section }: SettingsPageProps) {
         <AuditLogs organizationId={organizationId} />
       )}
       {effectiveSection === 'usage' && organizationId && (
-        <UsageMonitoring organizationId={organizationId} workspaceId={hostContext.workspace.id} />
+        <UsageMonitoring
+          organizationId={organizationId}
+          eventsHref={`/workspace/${hostContext.workspace.id}/settings/usage/events`}
+          auditLogsHref={`/workspace/${hostContext.workspace.id}/settings/audit-logs`}
+        />
       )}
       {effectiveSection === 'apikeys' && <ApiKeys scope='combined' />}
       {isBillingEnabled && effectiveSection === 'billing' && (

apps/sim/app/workspace/[workspaceId]/settings/usage/events/loading.tsx

@@ -16,7 +16,7 @@ export default function UsageEventsLoading() {
         onSelect: () => router.push(`/workspace/${workspaceId}/settings/usage`),
       }}
       title='Usage events'
-      description='Every credit-consuming event behind your usage.'
+      description="Every credit-consuming event across your organization's workspaces."
     />
   )
 }

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

@@ -8,19 +8,21 @@ import {
   formatChartTimestamp,
 } from '@/components/charts/chart-format'
 import {
+  CHART_AXIS_LABEL_GAP,
   CHART_DEFAULT_HEIGHT,
   CHART_GRID_FRACTIONS,
-  CHART_PADDING,
   CHART_TICK_FILL,
   CHART_TICK_FONT_SIZE,
   chartPlotBand,
   formatTimeTick,
+  resolveChartPadding,
   resolveSpanMs,
   resolveTimeTickIndices,
 } from '@/components/charts/chart-geometry'
 import {
   ChartTooltip,
   ChartTooltipRow,
+  estimateTooltipHeight,
   estimateTooltipWidth,
   positionChartTooltip,
 } from '@/components/charts/chart-tooltip'
@@ -47,6 +49,17 @@ interface BarChartProps {
   highlightIndex?: number
 }
 
+/** Tick and tooltip text for a bucket's value, in the caller's unit. */
+function formatBarValue(value: number | undefined, unit: string | undefined): string {
+  if (typeof value !== 'number' || !Number.isFinite(value)) return '—'
+  const suffix = (unit ?? '').toLowerCase()
+  if (suffix.includes('%')) return `${value.toFixed(1)}%`
+  if (suffix === 'latency') return formatChartLatency(value)
+  if (suffix.includes('ms')) return `${Math.round(value)}ms`
+  if (suffix === 'credits') return formatChartCompactNumber(value)
+  return `${Math.round(value)}${unit ?? ''}`
+}
+
 /**
  * Discrete time buckets as bars.
  *
@@ -71,16 +84,11 @@ function BarChartComponent({
   const uniqueId = useId().replace(/:/g, '')
   const [containerRef, containerWidth] = useChartWidth()
   const width = containerWidth ?? 0
-  const padding = CHART_PADDING
-  const chartWidth = width - padding.left - padding.right
-  const chartHeight = height - padding.top - padding.bottom
   const { yMin, yMax } = chartPlotBand(height)
   const isDark = useIsDarkTheme()
-  const [hoverIndex, setHoverIndex] = useState<number | null>(null)
   const [hoverPos, setHoverPos] = useState<{ x: number; y: number } | null>(null)
 
-  const colorTokens = useMemo(() => ({ base: color }), [color])
-  const resolvedColors = useResolvedChartColors(colorTokens)
+  const resolvedColors = useResolvedChartColors({ base: color })
   const resolvedColor = resolvedColors.base || color
 
   const hasExternalWrapper = !label
@@ -100,10 +108,27 @@ function BarChartComponent({
     return peak <= 0 ? 1 : peak * 1.1
   }, [data])
 
+  const padding = resolveChartPadding([formatBarValue(maxValue, unit), '0'])
+  const chartWidth = width - padding.left - padding.right
+  const chartHeight = height - padding.top - padding.bottom
+
   /** Slot geometry: every bucket owns an equal slice, with the bar centred in it. */
   const slot = data.length > 0 ? Math.max(1, chartWidth) / data.length : 0
   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.
+   */
+  const hoverIndex =
+    hoverPos === null || data.length === 0 || slot <= 0
+      ? null
+      : Math.max(0, Math.min(data.length - 1, Math.floor((hoverPos.x - padding.left) / slot)))
+
   const bars = useMemo(
     () =>
       data.map((point, index) => {
@@ -127,21 +152,14 @@ function BarChartComponent({
     [data, slot, barWidth, maxValue, chartHeight, height, padding.left, padding.top, yMin, yMax]
   )
 
-  const formatValue = (value?: number) => {
-    if (typeof value !== 'number' || !Number.isFinite(value)) return '—'
-    const suffix = (unit ?? '').toLowerCase()
-    if (suffix.includes('%')) return `${value.toFixed(1)}%`
-    if (suffix === 'latency') return formatChartLatency(value)
-    if (suffix.includes('ms')) return `${Math.round(value)}ms`
-    if (suffix === 'credits') return formatChartCompactNumber(value)
-    return `${Math.round(value)}${unit ?? ''}`
-  }
-
   if (containerWidth === null) {
     return (
       <div
         ref={containerRef}
-        className={cn('w-full', !hasExternalWrapper && 'rounded-lg border bg-card p-4')}
+        className={cn(
+          'w-full',
+          !hasExternalWrapper && 'rounded-lg border bg-[var(--surface-1)] p-4'
+        )}
         style={{ height }}
       />
     )
@@ -156,7 +174,7 @@ function BarChartComponent({
         ref={containerRef}
         className={cn(
           'flex w-full items-center justify-center',
-          !hasExternalWrapper && 'rounded-lg border bg-card p-4'
+          !hasExternalWrapper && 'rounded-lg border bg-[var(--surface-1)] p-4'
         )}
         /*
           Height only. `width` is floored at CHART_MIN_WIDTH for the plot geometry,
@@ -185,8 +203,14 @@ 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.
         */
-        'w-full overflow-x-auto',
-        !hasExternalWrapper && 'rounded-[11px] border bg-card p-4 shadow-sm'
+        /*
+          `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'
       )}
     >
       {!hasExternalWrapper && (
@@ -202,20 +226,9 @@ function BarChartComponent({
           onMouseMove={(e) => {
             if (bars.length === 0 || slot <= 0) return
             const rect = (e.currentTarget as SVGSVGElement).getBoundingClientRect()
-            const x = e.clientX - rect.left
-            // 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.
-            const index = Math.max(
-              0,
-              Math.min(data.length - 1, Math.floor((x - padding.left) / slot))
-            )
-            setHoverIndex(index)
-            setHoverPos({ x, y: e.clientY - rect.top })
-          }}
-          onMouseLeave={() => {
-            setHoverIndex(null)
-            setHoverPos(null)
+            setHoverPos({ x: e.clientX - rect.left, y: e.clientY - rect.top })
           }}
+          onMouseLeave={() => setHoverPos(null)}
         >
           <defs>
             <linearGradient id={`bar-${uniqueId}`} x1='0' x2='0' y1='0' y2='1'>
@@ -229,7 +242,7 @@ function BarChartComponent({
             y1={padding.top}
             x2={padding.left}
             y2={height - padding.bottom}
-            stroke='hsl(var(--border))'
+            stroke='var(--border)'
             strokeWidth='1'
           />
 
@@ -240,7 +253,7 @@ function BarChartComponent({
               y1={padding.top + chartHeight * fraction}
               x2={width - padding.right}
               y2={padding.top + chartHeight * fraction}
-              stroke='hsl(var(--muted))'
+              stroke='var(--border)'
               strokeOpacity='0.35'
               strokeWidth='1'
             />
@@ -313,18 +326,18 @@ function BarChartComponent({
           })}
 
           <text
-            x={padding.left - 8}
+            x={padding.left - CHART_AXIS_LABEL_GAP}
             y={padding.top}
             textAnchor='end'
             fontSize={CHART_TICK_FONT_SIZE}
             fill={CHART_TICK_FILL}
           >
             {/* Same formatter the tooltip uses, or the axis and the hover disagree
                 about what the numbers mean on any non-`credits` unit. */}
-            {formatValue(maxValue)}
+            {formatBarValue(maxValue, unit)}
           </text>
           <text
-            x={padding.left - 8}
+            x={padding.left - CHART_AXIS_LABEL_GAP}
             y={height - padding.bottom}
             textAnchor='end'
             fontSize={CHART_TICK_FONT_SIZE}
@@ -338,7 +351,7 @@ function BarChartComponent({
             y1={height - padding.bottom}
             x2={width - padding.right}
             y2={height - padding.bottom}
-            stroke='hsl(var(--border))'
+            stroke='var(--border)'
             strokeWidth='1'
           />
         </svg>
@@ -347,20 +360,19 @@ function BarChartComponent({
           bars[hoverIndex] &&
           (() => {
             const bar = bars[hoverIndex]
-            const value = formatValue(bar.point.value)
+            const value = formatBarValue(bar.point.value, unit)
+            const date = formatChartTimestamp(bar.point.timestamp)
             const { left, top } = positionChartTooltip({
               anchorX: hoverPos?.x ?? bar.x,
               anchorY: hoverPos?.y ?? bar.y,
               width,
               height,
               tooltipMaxWidth: estimateTooltipWidth(value.length),
+              tooltipHeight: estimateTooltipHeight(1, Boolean(date)),
+              padding,
             })
             return (
-              <ChartTooltip
-                left={left}
-                top={top}
-                date={formatChartTimestamp(bar.point.timestamp) || undefined}
-              >
+              <ChartTooltip left={left} top={top} date={date || undefined}>
                 <ChartTooltipRow color={resolvedColor} value={value} />
               </ChartTooltip>
             )

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

@@ -3,9 +3,12 @@
  */
 import { describe, expect, it } from 'vitest'
 import {
+  CHART_AXIS_LABEL_GAP,
   CHART_PADDING,
   chartPlotBand,
+  estimateAxisLabelWidth,
   formatTimeTick,
+  resolveChartPadding,
   resolveSpanMs,
   resolveTimeTickIndices,
 } from '@/components/charts/chart-geometry'
@@ -78,3 +81,33 @@ describe('chartPlotBand', () => {
     expect(chartPlotBand(240).yMax).toBeGreaterThan(chartPlotBand(166).yMax)
   })
 })
+
+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('leaves the other three sides on the shared constant', () => {
+    const padding = resolveChartPadding(['123.4m'])
+    expect(padding.top).toBe(CHART_PADDING.top)
+    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

@@ -10,16 +10,56 @@
 
 export const CHART_PADDING = { top: 16, right: 28, bottom: 26, left: 26 } as const
 
+export type ChartPadding = { top: number; right: number; bottom: number; left: number }
+
 /** 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. */
 export const CHART_MIN_WIDTH = 280
 
 export const CHART_TICK_FILL = 'var(--text-tertiary)'
-export const CHART_TICK_FONT_SIZE = '9'
+export const CHART_TICK_FONT_SIZE = 9
 export const CHART_GRID_FRACTIONS = [0.25, 0.5, 0.75] as const
 
+/** Gap between a y-axis tick label's right edge and the axis rule. */
+export const CHART_AXIS_LABEL_GAP = 8
+
+/**
+ * Rendered width of a right-anchored y-axis tick label.
+ *
+ * SVG `<text>` cannot be measured before layout, so the gutter that has to hold it
+ * is estimated from the glyphs instead. The ratios are for the UI sans at
+ * {@link CHART_TICK_FONT_SIZE}: digits and letters sit near 0.58em, punctuation and
+ * spaces near 0.3em. Deliberately generous — an over-wide gutter costs a couple of
+ * plot pixels, an under-wide one clips the label against the container's edge.
+ */
+export function estimateAxisLabelWidth(text: string): number {
+  let width = 0
+  for (const character of text) {
+    width += /[.,:\s]/.test(character) ? 0.3 : 0.58
+  }
+  return width * CHART_TICK_FONT_SIZE
+}
+
+/**
+ * {@link CHART_PADDING} with a left gutter wide enough for the chart's own y-axis
+ * labels.
+ *
+ * The fixed 26px gutter left 18px of drawable width once the label gap is taken out,
+ * which fits four narrow glyphs — so any tick past `7.3k` was cut off at the left edge
+ * of the container. Both charts resolve their gutter through this one function from
+ * the labels they are about to draw, so a bar and a line chart showing comparable
+ * magnitudes still line up when stacked in one card, and neither can clip.
+ */
+export function resolveChartPadding(yAxisLabels: readonly string[]): ChartPadding {
+  const widest = yAxisLabels.reduce((max, label) => Math.max(max, estimateAxisLabelWidth(label)), 0)
+  return {
+    ...CHART_PADDING,
+    left: Math.max(CHART_PADDING.left, Math.ceil(widest) + CHART_AXIS_LABEL_GAP),
+  }
+}
+
 /** Vertical clamp for plotted geometry, keeping strokes off the axis rules. */
 export function chartPlotBand(height: number): { yMin: number; yMax: number } {
   const chartHeight = height - CHART_PADDING.top - CHART_PADDING.bottom