From f086b72a7e1ab380070feb36567391a7d61ef93f Mon Sep 17 00:00:00 2001
From: alex-mcgovern <alex_mcgovernsmith@icloud.com>
Date: Wed, 29 Jan 2025 13:18:23 +0000
Subject: [PATCH 1/2] feat: initial work on alerts summary cards

---
 package.json                                  |    3 +-
 src/App.test.tsx                              |   13 +-
 src/components/ui/chart.tsx                   |  372 ------
 .../alerts-summary-malicious-pkg.tsx          |   15 +
 .../components/alerts-summary-secrets.tsx     |   15 +
 .../alerts-summary-workspace-token-usage.tsx  |   28 +
 .../alerts/components/alerts-summary.tsx      |   54 +
 ...uery-get-workspace-alerts-malicious-pkg.ts |    9 +
 .../use-query-get-workspace-alerts-secrets.ts |    9 +
 .../hooks/use-query-get-workspace-alerts.ts   |   29 +
 .../use-query-get-workspace-token-usage.ts    |   31 +
 .../lib/__tests__/is-alert-malicious.test.ts  |    2 +-
 .../alerts/lib/filter-alerts-critical.ts      |   22 +
 .../alerts/lib/get-alert-token-usage.ts       |    7 -
 ...{is-malicious.ts => is-alert-malicious.ts} |    0
 ...=> workspace-custom-instructions.test.tsx} |    0
 .../workspace/constants/monaco-theme.ts       | 1089 -----------------
 src/hooks/useAlertsData.ts                    |    5 +-
 src/hooks/useHelpContent.ts                   |   33 -
 src/lib/utils.ts                              |    2 +-
 src/mocks/msw/handlers.ts                     |   23 +
 src/routes/__tests__/route-dashboard.test.tsx |  100 +-
 src/routes/route-dashboard.tsx                |   23 +-
 src/viz/BarChart.tsx                          |   82 --
 src/viz/LineChart.tsx                         |  141 ---
 src/viz/PieChart.tsx                          |  163 ---
 26 files changed, 298 insertions(+), 1972 deletions(-)
 delete mode 100644 src/components/ui/chart.tsx
 create mode 100644 src/features/alerts/components/alerts-summary-malicious-pkg.tsx
 create mode 100644 src/features/alerts/components/alerts-summary-secrets.tsx
 create mode 100644 src/features/alerts/components/alerts-summary-workspace-token-usage.tsx
 create mode 100644 src/features/alerts/components/alerts-summary.tsx
 create mode 100644 src/features/alerts/hooks/use-query-get-workspace-alerts-malicious-pkg.ts
 create mode 100644 src/features/alerts/hooks/use-query-get-workspace-alerts-secrets.ts
 create mode 100644 src/features/alerts/hooks/use-query-get-workspace-alerts.ts
 create mode 100644 src/features/alerts/hooks/use-query-get-workspace-token-usage.ts
 create mode 100644 src/features/alerts/lib/filter-alerts-critical.ts
 delete mode 100644 src/features/alerts/lib/get-alert-token-usage.ts
 rename src/features/alerts/lib/{is-malicious.ts => is-alert-malicious.ts} (100%)
 rename src/features/workspace/components/__tests__/{workspace-custom-instructions.tsx => workspace-custom-instructions.test.tsx} (100%)
 delete mode 100644 src/features/workspace/constants/monaco-theme.ts
 delete mode 100644 src/hooks/useHelpContent.ts
 delete mode 100644 src/viz/BarChart.tsx
 delete mode 100644 src/viz/LineChart.tsx
 delete mode 100644 src/viz/PieChart.tsx

diff --git a/package.json b/package.json
index c8b531d8..6e432618 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "generate-client": "npm run fetch-openapi-schema && npm run openapi-ts",
     "fetch-openapi-schema": "curl https://raw.githubusercontent.com/stacklok/codegate/refs/heads/main/api/openapi.json > src/api/openapi.json",
     "openapi-ts": "openapi-ts",
-    "knip": "knip --production",
+    "knip": "knip",
     "lint": "eslint .",
     "lint:fix": "eslint --fix",
     "prepare": "husky",
@@ -40,7 +40,6 @@
     "react-markdown": "^9.0.1",
     "react-router-dom": "^7.1.1",
     "react-syntax-highlighter": "^15.6.1",
-    "recharts": "^2.15.0",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.5.5",
     "tailwind-variants": "^0.3.0",
diff --git a/src/App.test.tsx b/src/App.test.tsx
index e37b6076..c1807695 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,20 +1,9 @@
 import { render } from "@/lib/test-utils";
 import { screen, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import App from "./App";
-import React from "react";
 import userEvent from "@testing-library/user-event";
 
-vi.mock("recharts", async (importOriginal) => {
-  const originalModule = (await importOriginal()) as Record<string, unknown>;
-  return {
-    ...originalModule,
-    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => {
-      return <div data-testid="mock-responsive-container">{children}</div>;
-    },
-  };
-});
-
 describe("App", () => {
   it("should render header", async () => {
     render(<App />);
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
deleted file mode 100644
index 9b7f9bcf..00000000
--- a/src/components/ui/chart.tsx
+++ /dev/null
@@ -1,372 +0,0 @@
-import { clsx } from "clsx";
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { twMerge } from "tailwind-merge";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
-};
-
-type ChartContextProps = {
-  config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-  const context = React.useContext(ChartContext);
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-
-  return context;
-}
-
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig;
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"];
-  }
->(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={twMerge(
-          clsx(
-            "flex aspect-video justify-center text-sm [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          ),
-          className,
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
-});
-ChartContainer.displayName = "Chart";
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color,
-  );
-
-  if (!colorConfig.length) {
-    return null;
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
-}
-`,
-          )
-          .join("\n"),
-      }}
-    />
-  );
-};
-
-const ChartTooltip = RechartsPrimitive.Tooltip;
-
-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean;
-      hideIndicator?: boolean;
-      indicator?: "line" | "dot" | "dashed";
-      nameKey?: string;
-      labelKey?: string;
-    }
->(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = "dot",
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref,
-  ) => {
-    const { config } = useChart();
-
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null;
-      }
-
-      const [item] = payload;
-      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      const value =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label;
-
-      if (labelFormatter) {
-        return (
-          <div className={twMerge("font-medium", labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        );
-      }
-
-      if (!value) {
-        return null;
-      }
-
-      return (
-        <div className={twMerge("font-medium", labelClassName)}>{value}</div>
-      );
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ]);
-
-    if (!active || !payload?.length) {
-      return null;
-    }
-
-    const nestLabel = payload.length === 1 && indicator !== "dot";
-
-    return (
-      <div
-        ref={ref}
-        className={twMerge(
-          "grid min-w-32 items-start gap-1.5 rounded-lg border bg-base px-2.5 py-1.5 text-sm shadow-xl",
-          className,
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color;
-
-            return (
-              <div
-                key={item.dataKey}
-                className={twMerge(
-                  clsx(
-                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  ),
-                  indicator === "dot" && "items-center",
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={twMerge(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                            clsx({
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }),
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={twMerge(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center",
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-secondary">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="font-code font-medium tabular-nums text-primary">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  },
-);
-ChartTooltipContent.displayName = "ChartTooltip";
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean;
-      nameKey?: string;
-    }
->(
-  (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref,
-  ) => {
-    const { config } = useChart();
-
-    if (!payload?.length) {
-      return null;
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={twMerge(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className,
-        )}
-      >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-          return (
-            <div
-              key={item.value}
-              className={twMerge(
-                clsx(
-                  "flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:text-muted-foreground",
-                ),
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="size-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          );
-        })}
-      </div>
-    );
-  },
-);
-ChartLegendContent.displayName = "ChartLegend";
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string,
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined;
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined;
-
-  let configLabelKey: string = key;
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string;
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config];
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-};
diff --git a/src/features/alerts/components/alerts-summary-malicious-pkg.tsx b/src/features/alerts/components/alerts-summary-malicious-pkg.tsx
new file mode 100644
index 00000000..b43dfd53
--- /dev/null
+++ b/src/features/alerts/components/alerts-summary-malicious-pkg.tsx
@@ -0,0 +1,15 @@
+import { Box } from "lucide-react";
+import { AlertsSummary } from "./alerts-summary";
+import { useQueryGetWorkspaceAlertsMaliciousPkg } from "../hooks/use-query-get-workspace-alerts-malicious-pkg";
+
+export function AlertsSummaryMaliciousPkg() {
+  const { data = [], isPending } = useQueryGetWorkspaceAlertsMaliciousPkg();
+
+  return (
+    <AlertsSummary
+      isPending={isPending}
+      title="Malicious packages"
+      statistics={[{ count: data.length, id: "malicious-count", Icon: Box }]}
+    />
+  );
+}
diff --git a/src/features/alerts/components/alerts-summary-secrets.tsx b/src/features/alerts/components/alerts-summary-secrets.tsx
new file mode 100644
index 00000000..32443819
--- /dev/null
+++ b/src/features/alerts/components/alerts-summary-secrets.tsx
@@ -0,0 +1,15 @@
+import { Key } from "lucide-react";
+import { AlertsSummary } from "./alerts-summary";
+import { useQueryGetWorkspaceAlertSecrets } from "../hooks/use-query-get-workspace-alerts-secrets";
+
+export function AlertsSummaryMaliciousSecrets() {
+  const { data = [], isPending } = useQueryGetWorkspaceAlertSecrets();
+
+  return (
+    <AlertsSummary
+      isPending={isPending}
+      title="Secrets redacted"
+      statistics={[{ count: data.length, id: "secrets-count", Icon: Key }]}
+    />
+  );
+}
diff --git a/src/features/alerts/components/alerts-summary-workspace-token-usage.tsx b/src/features/alerts/components/alerts-summary-workspace-token-usage.tsx
new file mode 100644
index 00000000..5b2ec6bc
--- /dev/null
+++ b/src/features/alerts/components/alerts-summary-workspace-token-usage.tsx
@@ -0,0 +1,28 @@
+import { Download, Upload } from "lucide-react";
+import { AlertsSummary } from "./alerts-summary";
+import { useQueryGetWorkspaceTokenUsage } from "../hooks/use-query-get-workspace-token-usage";
+
+export function AlertsSummaryWorkspaceTokenUsage() {
+  const { data, isPending } = useQueryGetWorkspaceTokenUsage({
+    select: (data) => data.token_usage,
+  });
+
+  return (
+    <AlertsSummary
+      isPending={isPending}
+      title="Workspace token usage"
+      statistics={[
+        {
+          count: data?.input_tokens ?? 0,
+          id: "usage-input-tokens",
+          Icon: Upload,
+        },
+        {
+          count: data?.output_tokens ?? 0,
+          id: "usage-output-tokens",
+          Icon: Download,
+        },
+      ]}
+    />
+  );
+}
diff --git a/src/features/alerts/components/alerts-summary.tsx b/src/features/alerts/components/alerts-summary.tsx
new file mode 100644
index 00000000..3d71a27b
--- /dev/null
+++ b/src/features/alerts/components/alerts-summary.tsx
@@ -0,0 +1,54 @@
+import { Card, CardBody, Heading, Skeleton } from "@stacklok/ui-kit";
+import { LucideProps } from "lucide-react";
+import { ComponentProps } from "react";
+
+function AlertsSummaryStatistic({
+  count,
+  id,
+  Icon: Icon,
+}: {
+  count: number;
+  id: string;
+  Icon: React.ForwardRefExoticComponent<
+    Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
+  >;
+}) {
+  return (
+    <div id={id} className="text-5xl flex items-center gap-1">
+      <Icon className="size-11" />
+      {count}
+    </div>
+  );
+}
+
+export function AlertsSummary({
+  title,
+  statistics,
+  isPending,
+}: {
+  title: string;
+  statistics: ComponentProps<typeof AlertsSummaryStatistic>[];
+  isPending: boolean;
+}) {
+  return (
+    <Card>
+      <CardBody>
+        <Heading level={3} className="subhead-bold text-secondary">
+          {title}
+        </Heading>
+        {isPending ? (
+          <div className="flex items-center gap-1 my-3.5">
+            <Skeleton className="size-12 rounded-full" />
+            <Skeleton className="h-10 w-16 " />
+          </div>
+        ) : (
+          <div className="flex items-center gap-8">
+            {statistics.map((props) => (
+              <AlertsSummaryStatistic {...props} key={props.id} />
+            ))}
+          </div>
+        )}
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/src/features/alerts/hooks/use-query-get-workspace-alerts-malicious-pkg.ts b/src/features/alerts/hooks/use-query-get-workspace-alerts-malicious-pkg.ts
new file mode 100644
index 00000000..d487747e
--- /dev/null
+++ b/src/features/alerts/hooks/use-query-get-workspace-alerts-malicious-pkg.ts
@@ -0,0 +1,9 @@
+import { filterAlertsCritical } from "../lib/filter-alerts-critical";
+import { isAlertMalicious } from "../lib/is-alert-malicious";
+import { useQueryGetWorkspaceAlerts } from "./use-query-get-workspace-alerts";
+
+export function useQueryGetWorkspaceAlertsMaliciousPkg() {
+  return useQueryGetWorkspaceAlerts({
+    select: (data) => filterAlertsCritical(data).filter(isAlertMalicious),
+  });
+}
diff --git a/src/features/alerts/hooks/use-query-get-workspace-alerts-secrets.ts b/src/features/alerts/hooks/use-query-get-workspace-alerts-secrets.ts
new file mode 100644
index 00000000..2535fc8c
--- /dev/null
+++ b/src/features/alerts/hooks/use-query-get-workspace-alerts-secrets.ts
@@ -0,0 +1,9 @@
+import { filterAlertsCritical } from "../lib/filter-alerts-critical";
+import { isAlertSecret } from "../lib/is-alert-secret";
+import { useQueryGetWorkspaceAlerts } from "./use-query-get-workspace-alerts";
+
+export function useQueryGetWorkspaceAlertSecrets() {
+  return useQueryGetWorkspaceAlerts({
+    select: (data) => filterAlertsCritical(data).filter(isAlertSecret),
+  });
+}
diff --git a/src/features/alerts/hooks/use-query-get-workspace-alerts.ts b/src/features/alerts/hooks/use-query-get-workspace-alerts.ts
new file mode 100644
index 00000000..608f41c1
--- /dev/null
+++ b/src/features/alerts/hooks/use-query-get-workspace-alerts.ts
@@ -0,0 +1,29 @@
+import {
+  V1GetWorkspaceAlertsData,
+  V1GetWorkspaceAlertsResponse,
+} from "@/api/generated";
+import { v1GetWorkspaceAlertsOptions } from "@/api/generated/@tanstack/react-query.gen";
+import { useActiveWorkspaceName } from "@/features/workspace/hooks/use-active-workspace-name";
+import { useQuery } from "@tanstack/react-query";
+
+export function useQueryGetWorkspaceAlerts<T = V1GetWorkspaceAlertsResponse>({
+  select,
+}: {
+  select?: (data: V1GetWorkspaceAlertsResponse) => T;
+} = {}) {
+  const { data: activeWorkspaceName } = useActiveWorkspaceName();
+
+  const options: V1GetWorkspaceAlertsData = {
+    path: {
+      workspace_name: activeWorkspaceName ?? "default",
+    },
+  };
+
+  return useQuery({
+    ...v1GetWorkspaceAlertsOptions(options),
+    refetchOnMount: true,
+    refetchOnReconnect: true,
+    refetchOnWindowFocus: true,
+    select,
+  });
+}
diff --git a/src/features/alerts/hooks/use-query-get-workspace-token-usage.ts b/src/features/alerts/hooks/use-query-get-workspace-token-usage.ts
new file mode 100644
index 00000000..0b43972c
--- /dev/null
+++ b/src/features/alerts/hooks/use-query-get-workspace-token-usage.ts
@@ -0,0 +1,31 @@
+import {
+  V1GetWorkspaceTokenUsageData,
+  V1GetWorkspaceTokenUsageResponse,
+} from "@/api/generated";
+import { v1GetWorkspaceTokenUsageOptions } from "@/api/generated/@tanstack/react-query.gen";
+import { useActiveWorkspaceName } from "@/features/workspace/hooks/use-active-workspace-name";
+import { useQuery } from "@tanstack/react-query";
+
+export function useQueryGetWorkspaceTokenUsage<
+  T = V1GetWorkspaceTokenUsageResponse,
+>({
+  select,
+}: {
+  select?: (data: V1GetWorkspaceTokenUsageResponse) => T;
+} = {}) {
+  const { data: activeWorkspaceName } = useActiveWorkspaceName();
+
+  const options: V1GetWorkspaceTokenUsageData = {
+    path: {
+      workspace_name: activeWorkspaceName ?? "default",
+    },
+  };
+
+  return useQuery({
+    ...v1GetWorkspaceTokenUsageOptions(options),
+    refetchOnMount: true,
+    refetchOnReconnect: true,
+    refetchOnWindowFocus: true,
+    select,
+  });
+}
diff --git a/src/features/alerts/lib/__tests__/is-alert-malicious.test.ts b/src/features/alerts/lib/__tests__/is-alert-malicious.test.ts
index 55baa39b..860381aa 100644
--- a/src/features/alerts/lib/__tests__/is-alert-malicious.test.ts
+++ b/src/features/alerts/lib/__tests__/is-alert-malicious.test.ts
@@ -1,5 +1,5 @@
 import { test, expect } from "vitest";
-import { isAlertMalicious } from "../is-malicious";
+import { isAlertMalicious } from "../is-alert-malicious";
 import { ALERT_MALICIOUS } from "../../mocks/alert-malicious.mock";
 import { ALERT_SECRET } from "../../mocks/alert-secret.mock";
 
diff --git a/src/features/alerts/lib/filter-alerts-critical.ts b/src/features/alerts/lib/filter-alerts-critical.ts
new file mode 100644
index 00000000..5537728d
--- /dev/null
+++ b/src/features/alerts/lib/filter-alerts-critical.ts
@@ -0,0 +1,22 @@
+import {
+  AlertConversation,
+  V1GetWorkspaceAlertsResponse,
+} from "@/api/generated";
+
+export function filterAlertsCritical(
+  alerts: V1GetWorkspaceAlertsResponse | undefined,
+): AlertConversation[] {
+  return (alerts ?? [])
+    .filter(
+      (alert): alert is AlertConversation =>
+        alert !== null &&
+        alert.trigger_category === "critical" &&
+        alert?.conversation.question_answers.every(
+          (item) => item.answer && item.question,
+        ),
+    )
+    .sort(
+      (a, b) =>
+        new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
+    );
+}
diff --git a/src/features/alerts/lib/get-alert-token-usage.ts b/src/features/alerts/lib/get-alert-token-usage.ts
deleted file mode 100644
index 837ff5ef..00000000
--- a/src/features/alerts/lib/get-alert-token-usage.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { AlertConversation, TokenUsageAggregate } from "@/api/generated";
-
-export function getAlertTokenUsage(
-  alert: AlertConversation,
-): TokenUsageAggregate | null {
-  return alert.conversation.token_usage_agg;
-}
diff --git a/src/features/alerts/lib/is-malicious.ts b/src/features/alerts/lib/is-alert-malicious.ts
similarity index 100%
rename from src/features/alerts/lib/is-malicious.ts
rename to src/features/alerts/lib/is-alert-malicious.ts
diff --git a/src/features/workspace/components/__tests__/workspace-custom-instructions.tsx b/src/features/workspace/components/__tests__/workspace-custom-instructions.test.tsx
similarity index 100%
rename from src/features/workspace/components/__tests__/workspace-custom-instructions.tsx
rename to src/features/workspace/components/__tests__/workspace-custom-instructions.test.tsx
diff --git a/src/features/workspace/constants/monaco-theme.ts b/src/features/workspace/constants/monaco-theme.ts
deleted file mode 100644
index a4fa7e27..00000000
--- a/src/features/workspace/constants/monaco-theme.ts
+++ /dev/null
@@ -1,1089 +0,0 @@
-export const MONACO_THEME = {
-  base: "vs-dark",
-  inherit: true,
-  rules: [
-    {
-      background: "var(--bg-base)",
-      token: "",
-    },
-    {
-      foreground: "586e75",
-      token: "comment",
-    },
-    {
-      foreground: "2aa198",
-      token: "string",
-    },
-    {
-      foreground: "586e75",
-      token: "string",
-    },
-    {
-      foreground: "dc322f",
-      token: "string.regexp",
-    },
-    {
-      foreground: "d33682",
-      token: "constant.numeric",
-    },
-    {
-      foreground: "268bd2",
-      token: "variable.language",
-    },
-    {
-      foreground: "268bd2",
-      token: "variable.other",
-    },
-    {
-      foreground: "859900",
-      token: "keyword",
-    },
-    {
-      foreground: "859900",
-      token: "storage",
-    },
-    {
-      foreground: "268bd2",
-      token: "entity.name.class",
-    },
-    {
-      foreground: "268bd2",
-      token: "entity.name.type.class",
-    },
-    {
-      foreground: "268bd2",
-      token: "entity.name.function",
-    },
-    {
-      foreground: "859900",
-      token: "punctuation.definition.variable",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.section.embedded.begin",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.section.embedded.end",
-    },
-    {
-      foreground: "b58900",
-      token: "constant.language",
-    },
-    {
-      foreground: "b58900",
-      token: "meta.preprocessor",
-    },
-    {
-      foreground: "dc322f",
-      token: "support.function.construct",
-    },
-    {
-      foreground: "dc322f",
-      token: "keyword.other.new",
-    },
-    {
-      foreground: "cb4b16",
-      token: "constant.character",
-    },
-    {
-      foreground: "cb4b16",
-      token: "constant.other",
-    },
-    {
-      foreground: "268bd2",
-      fontStyle: "bold",
-      token: "entity.name.tag",
-    },
-    {
-      foreground: "586e75",
-      token: "punctuation.definition.tag.html",
-    },
-    {
-      foreground: "586e75",
-      token: "punctuation.definition.tag.begin",
-    },
-    {
-      foreground: "586e75",
-      token: "punctuation.definition.tag.end",
-    },
-    {
-      foreground: "93a1a1",
-      token: "entity.other.attribute-name",
-    },
-    {
-      foreground: "268bd2",
-      token: "support.function",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.separator.continuation",
-    },
-    {
-      foreground: "859900",
-      token: "support.type",
-    },
-    {
-      foreground: "859900",
-      token: "support.class",
-    },
-    {
-      foreground: "cb4b16",
-      token: "support.type.exception",
-    },
-    {
-      foreground: "cb4b16",
-      token: "keyword.other.special-method",
-    },
-    {
-      foreground: "2aa198",
-      token: "string.quoted.double",
-    },
-    {
-      foreground: "2aa198",
-      token: "string.quoted.single",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.string.begin",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.string.end",
-    },
-    {
-      foreground: "b58900",
-      token: "entity.name.tag.css",
-    },
-    {
-      foreground: "b58900",
-      token: "support.type.property-name.css",
-    },
-    {
-      foreground: "b58900",
-      token: "meta.property-name.css",
-    },
-    {
-      foreground: "dc322f",
-      token: "source.css",
-    },
-    {
-      foreground: "586e75",
-      token: "meta.selector.css",
-    },
-    {
-      foreground: "6c71c4",
-      token: "punctuation.section.property-list.css",
-    },
-    {
-      foreground: "2aa198",
-      token: "meta.property-value.css constant.numeric.css",
-    },
-    {
-      foreground: "2aa198",
-      token: "keyword.other.unit.css",
-    },
-    {
-      foreground: "2aa198",
-      token: "constant.other.color.rgb-value.css",
-    },
-    {
-      foreground: "2aa198",
-      token: "meta.property-value.css",
-    },
-    {
-      foreground: "dc322f",
-      token: "keyword.other.important.css",
-    },
-    {
-      foreground: "2aa198",
-      token: "support.constant.color",
-    },
-    {
-      foreground: "859900",
-      token: "entity.name.tag.css",
-    },
-    {
-      foreground: "586e75",
-      token: "punctuation.separator.key-value.css",
-    },
-    {
-      foreground: "586e75",
-      token: "punctuation.terminator.rule.css",
-    },
-    {
-      foreground: "268bd2",
-      token: "entity.other.attribute-name.class.css",
-    },
-    {
-      foreground: "cb4b16",
-      token: "entity.other.attribute-name.pseudo-element.css",
-    },
-    {
-      foreground: "cb4b16",
-      token: "entity.other.attribute-name.pseudo-class.css",
-    },
-    {
-      foreground: "268bd2",
-      token: "entity.other.attribute-name.id.css",
-    },
-    {
-      foreground: "b58900",
-      token: "meta.function.js",
-    },
-    {
-      foreground: "b58900",
-      token: "entity.name.function.js",
-    },
-    {
-      foreground: "b58900",
-      token: "support.function.dom.js",
-    },
-    {
-      foreground: "b58900",
-      token: "text.html.basic source.js.embedded.html",
-    },
-    {
-      foreground: "268bd2",
-      token: "storage.type.function.js",
-    },
-    {
-      foreground: "2aa198",
-      token: "constant.numeric.js",
-    },
-    {
-      foreground: "268bd2",
-      token: "meta.brace.square.js",
-    },
-    {
-      foreground: "268bd2",
-      token: "storage.type.js",
-    },
-    {
-      foreground: "93a1a1",
-      token: "meta.brace.round",
-    },
-    {
-      foreground: "93a1a1",
-      token: "punctuation.definition.parameters.begin.js",
-    },
-    {
-      foreground: "93a1a1",
-      token: "punctuation.definition.parameters.end.js",
-    },
-    {
-      foreground: "268bd2",
-      token: "meta.brace.curly.js",
-    },
-    {
-      foreground: "93a1a1",
-      fontStyle: "italic",
-      token: "entity.name.tag.doctype.html",
-    },
-    {
-      foreground: "93a1a1",
-      fontStyle: "italic",
-      token: "meta.tag.sgml.html",
-    },
-    {
-      foreground: "93a1a1",
-      fontStyle: "italic",
-      token: "string.quoted.double.doctype.identifiers-and-DTDs.html",
-    },
-    {
-      foreground: "839496",
-      fontStyle: "italic",
-      token: "comment.block.html",
-    },
-    {
-      fontStyle: "italic",
-      token: "entity.name.tag.script.html",
-    },
-    {
-      foreground: "2aa198",
-      token: "source.css.embedded.html string.quoted.double.html",
-    },
-    {
-      foreground: "cb4b16",
-      fontStyle: "bold",
-      token: "text.html.ruby",
-    },
-    {
-      foreground: "657b83",
-      token: "text.html.basic meta.tag.other.html",
-    },
-    {
-      foreground: "657b83",
-      token: "text.html.basic meta.tag.any.html",
-    },
-    {
-      foreground: "657b83",
-      token: "text.html.basic meta.tag.block.any",
-    },
-    {
-      foreground: "657b83",
-      token: "text.html.basic meta.tag.inline.any",
-    },
-    {
-      foreground: "657b83",
-      token: "text.html.basic meta.tag.structure.any.html",
-    },
-    {
-      foreground: "657b83",
-      token: "text.html.basic source.js.embedded.html",
-    },
-    {
-      foreground: "657b83",
-      token: "punctuation.separator.key-value.html",
-    },
-    {
-      foreground: "657b83",
-      token: "text.html.basic entity.other.attribute-name.html",
-    },
-    {
-      foreground: "2aa198",
-      token:
-        "text.html.basic meta.tag.structure.any.html punctuation.definition.string.begin.html",
-    },
-    {
-      foreground: "2aa198",
-      token: "punctuation.definition.string.begin.html",
-    },
-    {
-      foreground: "2aa198",
-      token: "punctuation.definition.string.end.html",
-    },
-    {
-      foreground: "268bd2",
-      fontStyle: "bold",
-      token: "entity.name.tag.block.any.html",
-    },
-    {
-      fontStyle: "italic",
-      token: "source.css.embedded.html entity.name.tag.style.html",
-    },
-    {
-      foreground: "839496",
-      fontStyle: "italic",
-      token: "source.css.embedded.html",
-    },
-    {
-      foreground: "839496",
-      fontStyle: "italic",
-      token: "comment.block.html",
-    },
-    {
-      foreground: "268bd2",
-      token: "punctuation.definition.variable.ruby",
-    },
-    {
-      foreground: "657b83",
-      token: "meta.function.method.with-arguments.ruby",
-    },
-    {
-      foreground: "2aa198",
-      token: "variable.language.ruby",
-    },
-    {
-      foreground: "268bd2",
-      token: "entity.name.function.ruby",
-    },
-    {
-      foreground: "859900",
-      fontStyle: "bold",
-      token: "keyword.control.ruby",
-    },
-    {
-      foreground: "859900",
-      fontStyle: "bold",
-      token: "keyword.control.def.ruby",
-    },
-    {
-      foreground: "859900",
-      token: "keyword.control.class.ruby",
-    },
-    {
-      foreground: "859900",
-      token: "meta.class.ruby",
-    },
-    {
-      foreground: "b58900",
-      token: "entity.name.type.class.ruby",
-    },
-    {
-      foreground: "859900",
-      token: "keyword.control.ruby",
-    },
-    {
-      foreground: "b58900",
-      token: "support.class.ruby",
-    },
-    {
-      foreground: "859900",
-      token: "keyword.other.special-method.ruby",
-    },
-    {
-      foreground: "2aa198",
-      token: "constant.language.ruby",
-    },
-    {
-      foreground: "2aa198",
-      token: "constant.numeric.ruby",
-    },
-    {
-      foreground: "b58900",
-      token: "variable.other.constant.ruby",
-    },
-    {
-      foreground: "2aa198",
-      token: "constant.other.symbol.ruby",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.section.embedded.ruby",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.string.begin.ruby",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.string.end.ruby",
-    },
-    {
-      foreground: "cb4b16",
-      token: "keyword.other.special-method.ruby",
-    },
-    {
-      foreground: "cb4b16",
-      token: "keyword.control.import.include.php",
-    },
-    {
-      foreground: "839496",
-      token: "text.html.ruby meta.tag.inline.any.html",
-    },
-    {
-      foreground: "2aa198",
-      token: "text.html.ruby punctuation.definition.string.begin",
-    },
-    {
-      foreground: "2aa198",
-      token: "text.html.ruby punctuation.definition.string.end",
-    },
-    {
-      foreground: "839496",
-      token: "punctuation.definition.string.begin",
-    },
-    {
-      foreground: "839496",
-      token: "punctuation.definition.string.end",
-    },
-    {
-      foreground: "839496",
-      token: "support.class.php",
-    },
-    {
-      foreground: "dc322f",
-      token: "keyword.operator.index-start.php",
-    },
-    {
-      foreground: "dc322f",
-      token: "keyword.operator.index-end.php",
-    },
-    {
-      foreground: "586e75",
-      token: "meta.array.php",
-    },
-    {
-      foreground: "b58900",
-      token: "meta.array.php support.function.construct.php",
-    },
-    {
-      foreground: "b58900",
-      token: "meta.array.empty.php support.function.construct.php",
-    },
-    {
-      foreground: "b58900",
-      token: "support.function.construct.php",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.array.begin",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.array.end",
-    },
-    {
-      foreground: "2aa198",
-      token: "constant.numeric.php",
-    },
-    {
-      foreground: "cb4b16",
-      token: "keyword.other.new.php",
-    },
-    {
-      foreground: "839496",
-      token: "keyword.operator.class",
-    },
-    {
-      foreground: "93a1a1",
-      token: "variable.other.property.php",
-    },
-    {
-      foreground: "b58900",
-      token: "storage.modifier.extends.php",
-    },
-    {
-      foreground: "b58900",
-      token: "storage.type.class.php",
-    },
-    {
-      foreground: "b58900",
-      token: "keyword.operator.class.php",
-    },
-    {
-      foreground: "839496",
-      token: "punctuation.terminator.expression.php",
-    },
-    {
-      foreground: "586e75",
-      token: "meta.other.inherited-class.php",
-    },
-    {
-      foreground: "859900",
-      token: "storage.type.php",
-    },
-    {
-      foreground: "93a1a1",
-      token: "entity.name.function.php",
-    },
-    {
-      foreground: "859900",
-      token: "support.function.construct.php",
-    },
-    {
-      foreground: "839496",
-      token: "entity.name.type.class.php",
-    },
-    {
-      foreground: "839496",
-      token: "meta.function-call.php",
-    },
-    {
-      foreground: "839496",
-      token: "meta.function-call.static.php",
-    },
-    {
-      foreground: "839496",
-      token: "meta.function-call.object.php",
-    },
-    {
-      foreground: "93a1a1",
-      token: "keyword.other.phpdoc",
-    },
-    {
-      foreground: "cb4b16",
-      token: "source.php.embedded.block.html",
-    },
-    {
-      foreground: "cb4b16",
-      token: "storage.type.function.php",
-    },
-    {
-      foreground: "2aa198",
-      token: "constant.numeric.c",
-    },
-    {
-      foreground: "cb4b16",
-      token: "meta.preprocessor.c.include",
-    },
-    {
-      foreground: "cb4b16",
-      token: "meta.preprocessor.macro.c",
-    },
-    {
-      foreground: "cb4b16",
-      token: "keyword.control.import.define.c",
-    },
-    {
-      foreground: "cb4b16",
-      token: "keyword.control.import.include.c",
-    },
-    {
-      foreground: "cb4b16",
-      token: "entity.name.function.preprocessor.c",
-    },
-    {
-      foreground: "2aa198",
-      token: "meta.preprocessor.c.include string.quoted.other.lt-gt.include.c",
-    },
-    {
-      foreground: "2aa198",
-      token:
-        "meta.preprocessor.c.include punctuation.definition.string.begin.c",
-    },
-    {
-      foreground: "2aa198",
-      token: "meta.preprocessor.c.include punctuation.definition.string.end.c",
-    },
-    {
-      foreground: "586e75",
-      token: "support.function.C99.c",
-    },
-    {
-      foreground: "586e75",
-      token: "support.function.any-method.c",
-    },
-    {
-      foreground: "586e75",
-      token: "entity.name.function.c",
-    },
-    {
-      foreground: "2aa198",
-      token: "punctuation.definition.string.begin.c",
-    },
-    {
-      foreground: "2aa198",
-      token: "punctuation.definition.string.end.c",
-    },
-    {
-      foreground: "b58900",
-      token: "storage.type.c",
-    },
-    {
-      foreground: "e0eddd",
-      background: "b58900",
-      fontStyle: "italic",
-      token: "meta.diff",
-    },
-    {
-      foreground: "e0eddd",
-      background: "b58900",
-      fontStyle: "italic",
-      token: "meta.diff.header",
-    },
-    {
-      foreground: "dc322f",
-      background: "eee8d5",
-      token: "markup.deleted",
-    },
-    {
-      foreground: "cb4b16",
-      background: "eee8d5",
-      token: "markup.changed",
-    },
-    {
-      foreground: "219186",
-      background: "eee8d5",
-      token: "markup.inserted",
-    },
-    {
-      foreground: "e0eddd",
-      background: "b58900",
-      token: "text.html.markdown meta.dummy.line-break",
-    },
-    {
-      foreground: "2aa198",
-      token: "text.html.markdown markup.raw.inline",
-    },
-    {
-      foreground: "2aa198",
-      token: "text.restructuredtext markup.raw",
-    },
-    {
-      foreground: "dc322f",
-      token: "other.package.exclude",
-    },
-    {
-      foreground: "dc322f",
-      token: "other.remove",
-    },
-    {
-      foreground: "2aa198",
-      token: "other.add",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.section.group.tex",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.arguments.begin.latex",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.arguments.end.latex",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.arguments.latex",
-    },
-    {
-      foreground: "b58900",
-      token: "meta.group.braces.tex",
-    },
-    {
-      foreground: "b58900",
-      token: "string.other.math.tex",
-    },
-    {
-      foreground: "cb4b16",
-      token: "variable.parameter.function.latex",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.constant.math.tex",
-    },
-    {
-      foreground: "2aa198",
-      token: "text.tex.latex constant.other.math.tex",
-    },
-    {
-      foreground: "2aa198",
-      token: "constant.other.general.math.tex",
-    },
-    {
-      foreground: "2aa198",
-      token: "constant.other.general.math.tex",
-    },
-    {
-      foreground: "2aa198",
-      token: "constant.character.math.tex",
-    },
-    {
-      foreground: "b58900",
-      token: "string.other.math.tex",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.string.begin.tex",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.string.end.tex",
-    },
-    {
-      foreground: "2aa198",
-      token: "keyword.control.label.latex",
-    },
-    {
-      foreground: "2aa198",
-      token: "text.tex.latex constant.other.general.math.tex",
-    },
-    {
-      foreground: "dc322f",
-      token: "variable.parameter.definition.label.latex",
-    },
-    {
-      foreground: "859900",
-      token: "support.function.be.latex",
-    },
-    {
-      foreground: "cb4b16",
-      token: "support.function.section.latex",
-    },
-    {
-      foreground: "2aa198",
-      token: "support.function.general.tex",
-    },
-    {
-      fontStyle: "italic",
-      token: "punctuation.definition.comment.tex",
-    },
-    {
-      fontStyle: "italic",
-      token: "comment.line.percentage.tex",
-    },
-    {
-      foreground: "2aa198",
-      token: "keyword.control.ref.latex",
-    },
-    {
-      foreground: "586e75",
-      token: "string.quoted.double.block.python",
-    },
-    {
-      foreground: "859900",
-      token: "storage.type.class.python",
-    },
-    {
-      foreground: "859900",
-      token: "storage.type.function.python",
-    },
-    {
-      foreground: "859900",
-      token: "storage.modifier.global.python",
-    },
-    {
-      foreground: "cb4b16",
-      token: "keyword.control.import.python",
-    },
-    {
-      foreground: "cb4b16",
-      token: "keyword.control.import.from.python",
-    },
-    {
-      foreground: "b58900",
-      token: "support.type.exception.python",
-    },
-    {
-      foreground: "859900",
-      token: "support.function.builtin.shell",
-    },
-    {
-      foreground: "cb4b16",
-      token: "variable.other.normal.shell",
-    },
-    {
-      foreground: "268bd2",
-      token: "source.shell",
-    },
-    {
-      foreground: "586e75",
-      token: "meta.scope.for-in-loop.shell",
-    },
-    {
-      foreground: "586e75",
-      token: "variable.other.loop.shell",
-    },
-    {
-      foreground: "859900",
-      token: "punctuation.definition.string.end.shell",
-    },
-    {
-      foreground: "859900",
-      token: "punctuation.definition.string.begin.shell",
-    },
-    {
-      foreground: "586e75",
-      token: "meta.scope.case-block.shell",
-    },
-    {
-      foreground: "586e75",
-      token: "meta.scope.case-body.shell",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.logical-expression.shell",
-    },
-    {
-      fontStyle: "italic",
-      token: "comment.line.number-sign.shell",
-    },
-    {
-      foreground: "cb4b16",
-      token: "keyword.other.import.java",
-    },
-    {
-      foreground: "586e75",
-      token: "storage.modifier.import.java",
-    },
-    {
-      foreground: "b58900",
-      token: "meta.class.java storage.modifier.java",
-    },
-    {
-      foreground: "586e75",
-      token: "source.java comment.block",
-    },
-    {
-      foreground: "586e75",
-      token:
-        "comment.block meta.documentation.tag.param.javadoc keyword.other.documentation.param.javadoc",
-    },
-    {
-      foreground: "b58900",
-      token: "punctuation.definition.variable.perl",
-    },
-    {
-      foreground: "b58900",
-      token: "variable.other.readwrite.global.perl",
-    },
-    {
-      foreground: "b58900",
-      token: "variable.other.predefined.perl",
-    },
-    {
-      foreground: "b58900",
-      token: "keyword.operator.comparison.perl",
-    },
-    {
-      foreground: "859900",
-      token: "support.function.perl",
-    },
-    {
-      foreground: "586e75",
-      fontStyle: "italic",
-      token: "comment.line.number-sign.perl",
-    },
-    {
-      foreground: "2aa198",
-      token: "punctuation.definition.string.begin.perl",
-    },
-    {
-      foreground: "2aa198",
-      token: "punctuation.definition.string.end.perl",
-    },
-    {
-      foreground: "dc322f",
-      token: "constant.character.escape.perl",
-    },
-    {
-      foreground: "268bd2",
-      token: "markup.heading.markdown",
-    },
-    {
-      foreground: "268bd2",
-      token: "markup.heading.1.markdown",
-    },
-    {
-      foreground: "268bd2",
-      token: "markup.heading.2.markdown",
-    },
-    {
-      foreground: "268bd2",
-      token: "markup.heading.3.markdown",
-    },
-    {
-      foreground: "268bd2",
-      token: "markup.heading.4.markdown",
-    },
-    {
-      foreground: "268bd2",
-      token: "markup.heading.5.markdown",
-    },
-    {
-      foreground: "268bd2",
-      token: "markup.heading.6.markdown",
-    },
-    {
-      foreground: "839496",
-      fontStyle: "bold",
-      token: "markup.bold.markdown",
-    },
-    {
-      foreground: "839496",
-      fontStyle: "italic",
-      token: "markup.italic.markdown",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.bold.markdown",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.italic.markdown",
-    },
-    {
-      foreground: "dc322f",
-      token: "punctuation.definition.raw.markdown",
-    },
-    {
-      foreground: "b58900",
-      token: "markup.list.unnumbered.markdown",
-    },
-    {
-      foreground: "859900",
-      token: "markup.list.numbered.markdown",
-    },
-    {
-      foreground: "2aa198",
-      token: "markup.raw.block.markdown",
-    },
-    {
-      foreground: "2aa198",
-      token: "markup.raw.inline.markdown",
-    },
-    {
-      foreground: "6c71c4",
-      token: "markup.quote.markdown",
-    },
-    {
-      foreground: "6c71c4",
-      token: "punctuation.definition.blockquote.markdown",
-    },
-    {
-      foreground: "d33682",
-      token: "meta.separator.markdown",
-    },
-    {
-      foreground: "586e75",
-      fontStyle: "italic",
-      token: "meta.image.inline.markdown",
-    },
-    {
-      foreground: "586e75",
-      fontStyle: "italic",
-      token: "markup.underline.link.markdown",
-    },
-    {
-      foreground: "93a1a1",
-      token: "string.other.link.title.markdown",
-    },
-    {
-      foreground: "93a1a1",
-      token: "string.other.link.description.markdown",
-    },
-    {
-      foreground: "586e75",
-      token: "punctuation.definition.link.markdown",
-    },
-    {
-      foreground: "586e75",
-      token: "punctuation.definition.metadata.markdown",
-    },
-    {
-      foreground: "586e75",
-      token: "punctuation.definition.string.begin.markdown",
-    },
-    {
-      foreground: "586e75",
-      token: "punctuation.definition.string.end.markdown",
-    },
-    {
-      foreground: "586e75",
-      token: "punctuation.definition.constant.markdown",
-    },
-    {
-      foreground: "eee8d5",
-      background: "eee8d5",
-      token: "sublimelinter.notes",
-    },
-    {
-      foreground: "93a1a1",
-      background: "93a1a1",
-      token: "sublimelinter.outline.illegal",
-    },
-    {
-      background: "dc322f",
-      token: "sublimelinter.underline.illegal",
-    },
-    {
-      foreground: "839496",
-      background: "839496",
-      token: "sublimelinter.outline.warning",
-    },
-    {
-      background: "b58900",
-      token: "sublimelinter.underline.warning",
-    },
-    {
-      foreground: "657b83",
-      background: "657b83",
-      token: "sublimelinter.outline.violation",
-    },
-    {
-      background: "cb4b16",
-      token: "sublimelinter.underline.violation",
-    },
-  ],
-  colors: {
-    "editor.foreground": "#839496",
-    "editor.background": "#002B36",
-    "editor.selectionBackground": "#073642",
-    "editor.lineHighlightBackground": "#073642",
-    "editorCursor.foreground": "#819090",
-    "editorWhitespace.foreground": "#073642",
-  },
-};
diff --git a/src/hooks/useAlertsData.ts b/src/hooks/useAlertsData.ts
index e93d7017..3b82e37a 100644
--- a/src/hooks/useAlertsData.ts
+++ b/src/hooks/useAlertsData.ts
@@ -7,7 +7,6 @@ import {
 import { getMaliciousPackage } from "@/lib/utils";
 import { MaliciousPkgType, TriggerType } from "@/types";
 import { useAlertSearch } from "./useAlertSearch";
-import { v1GetWorkspaceAlertsQueryKey } from "@/api/generated/@tanstack/react-query.gen";
 import { useActiveWorkspaceName } from "@/features/workspace/hooks/use-active-workspace-name";
 
 const fetchAlerts = async (
@@ -31,6 +30,8 @@ const fetchAlerts = async (
   return results;
 };
 
+/** @deprecated — incrementally aiming to replace this with more granular
+ * approach - AMG */
 export const useAlertsData = ({ ...args } = {}) => {
   const { data: activeWorkspaceName } = useActiveWorkspaceName();
 
@@ -41,7 +42,7 @@ export const useAlertsData = ({ ...args } = {}) => {
   };
 
   return useQuery({
-    queryKey: v1GetWorkspaceAlertsQueryKey(options),
+    queryKey: ["useAlertsData", options],
     queryFn: () => fetchAlerts(options),
     ...args,
   });
diff --git a/src/hooks/useHelpContent.ts b/src/hooks/useHelpContent.ts
deleted file mode 100644
index 9f5c1b48..00000000
--- a/src/hooks/useHelpContent.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import Prism from "prismjs";
-
-const fetchHelpContent = async (
-  section: string | undefined,
-): Promise<string> => {
-  if (!section) {
-    throw new Error("Section is required");
-  }
-
-  const response = await fetch(`/help/${section}.md`);
-  if (!response.ok) {
-    throw new Error("Failed to load content");
-  }
-
-  return response.text();
-};
-
-export const useHelpContent = (section: string | undefined) => {
-  return useQuery({
-    queryKey: ["helpContent", section],
-    queryFn: () => fetchHelpContent(section),
-    enabled: !!section,
-    staleTime: 0,
-    select: (data) => {
-      // Allow content to render before highlighting
-      setTimeout(() => {
-        Prism.highlightAll();
-      }, 0);
-      return data;
-    },
-  });
-};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 100451bb..b1e13234 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
 import { AlertConversation, Conversation } from "@/api/generated/types.gen";
 import { isAlertSecret } from "@/features/alerts/lib/is-alert-secret";
-import { isAlertMalicious } from "@/features/alerts/lib/is-malicious";
+import { isAlertMalicious } from "@/features/alerts/lib/is-alert-malicious";
 import { MaliciousPkgType, TriggerType } from "@/types";
 import { format, isToday, isYesterday } from "date-fns";
 
diff --git a/src/mocks/msw/handlers.ts b/src/mocks/msw/handlers.ts
index 51e09f40..df9d64b8 100644
--- a/src/mocks/msw/handlers.ts
+++ b/src/mocks/msw/handlers.ts
@@ -3,6 +3,7 @@ import mockedPrompts from "@/mocks/msw/fixtures/GET_MESSAGES.json";
 import mockedAlerts from "@/mocks/msw/fixtures/GET_ALERTS.json";
 import mockedWorkspaces from "@/mocks/msw/fixtures/GET_WORKSPACES.json";
 import mockedProviders from "@/mocks/msw/fixtures/GET_PROVIDERS.json";
+import { ProviderType } from "@/api/generated";
 
 export const handlers = [
   http.get("*/health", () =>
@@ -66,6 +67,28 @@ export const handlers = [
   http.get("*/api/v1/workspaces/:name/custom-instructions", () => {
     return HttpResponse.json({ prompt: "foo" });
   }),
+  http.get("*/api/v1/workspaces/:name/token-usage", () => {
+    return HttpResponse.json({
+      tokens_by_model: {
+        "claude-3-5-sonnet-latest": {
+          provider_type: ProviderType.ANTHROPIC,
+          model: "claude-3-5-sonnet-latest",
+          token_usage: {
+            input_tokens: 1183,
+            output_tokens: 433,
+            input_cost: 0.003549,
+            output_cost: 0.006495,
+          },
+        },
+      },
+      token_usage: {
+        input_tokens: 1183,
+        output_tokens: 433,
+        input_cost: 0.003549,
+        output_cost: 0.006495,
+      },
+    });
+  }),
   http.put(
     "*/api/v1/workspaces/:name/custom-instructions",
     () => new HttpResponse(null, { status: 204 }),
diff --git a/src/routes/__tests__/route-dashboard.test.tsx b/src/routes/__tests__/route-dashboard.test.tsx
index a2faf6bb..224dacc0 100644
--- a/src/routes/__tests__/route-dashboard.test.tsx
+++ b/src/routes/__tests__/route-dashboard.test.tsx
@@ -1,24 +1,14 @@
 import { render } from "@/lib/test-utils";
 import { screen, waitFor, within } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { faker } from "@faker-js/faker";
-import React from "react";
+
 import { server } from "@/mocks/msw/node";
 import { HttpResponse, http } from "msw";
 import mockedAlerts from "@/mocks/msw/fixtures/GET_ALERTS.json";
 import userEvent from "@testing-library/user-event";
 import { RouteDashboard } from "../route-dashboard";
 
-vi.mock("recharts", async (importOriginal) => {
-  const originalModule = (await importOriginal()) as Record<string, unknown>;
-  return {
-    ...originalModule,
-    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => {
-      return <div data-testid="mock-responsive-container">{children}</div>;
-    },
-  };
-});
-
 const fakeConversionation1 = {
   conversation: {
     question_answers: [
@@ -112,32 +102,31 @@ function mockManyAlerts() {
 }
 
 describe("Dashboard", () => {
-  it("should render charts and table", async () => {
+  it("should mount alert summaries", async () => {
     render(<RouteDashboard />);
-    expect(screen.getByText(/security issues detected/i)).toBeVisible();
-    expect(screen.getByText(/malicious packages by type/i)).toBeVisible();
-    expect(screen.getByText(/alerts by date/i)).toBeVisible();
 
     expect(
-      screen.getByRole("heading", {
-        name: /all alerts/i,
-      }),
+      screen.getByRole("heading", { name: /workspace token usage/i }),
     ).toBeVisible();
-    expect(screen.getByTestId(/alerts-count/i)).toHaveTextContent("0");
+
     expect(
-      (await screen.findAllByTestId(/mock-responsive-container/i)).length,
-    ).toEqual(1);
-    await waitFor(() => expect(screen.getByText("Jan 02")).toBeVisible());
-    await waitFor(() => expect(screen.getByText("Jan 03")).toBeVisible());
-    await waitFor(() => expect(screen.getByText("Jan 07")).toBeVisible());
-
-    expect(screen.getByTestId("codegate-secrets-count")).toHaveTextContent(
-      "13",
-    );
+      screen.getByRole("heading", { name: /secrets redacted/i }),
+    ).toBeVisible();
+
+    expect(
+      screen.getByRole("heading", { name: /malicious packages/i }),
+    ).toBeVisible();
+  });
+
+  it("should render alerts table", async () => {
+    render(<RouteDashboard />);
 
     expect(
-      within(screen.getByTestId("malicious-piechart")).getByText("N/A"),
+      screen.getByRole("heading", {
+        name: /all alerts/i,
+      }),
     ).toBeVisible();
+    expect(screen.getByTestId(/alerts-count/i)).toHaveTextContent("0");
 
     expect(
       screen.getByRole("columnheader", {
@@ -175,6 +164,12 @@ describe("Dashboard", () => {
     ).toBeVisible();
     expect(screen.getByRole("searchbox")).toBeVisible();
 
+    await waitFor(() => {
+      expect(
+        within(screen.getByTestId("alerts-table")).getAllByRole("row").length,
+      ).toBeGreaterThan(1);
+    });
+
     const firstRow = within(screen.getByTestId("alerts-table")).getAllByRole(
       "row",
     )[1] as HTMLElement;
@@ -188,23 +183,15 @@ describe("Dashboard", () => {
     ).toBeGreaterThanOrEqual(1);
   });
 
-  it("should render malicious pkg", async () => {
+  it("should render malicious pkg table column", async () => {
     mockAlertsWithMaliciousPkg();
     render(<RouteDashboard />);
 
-    expect(
-      (await screen.findAllByTestId(/mock-responsive-container/i)).length,
-    ).toEqual(2);
-
-    expect(
-      within(screen.getByTestId("malicious-piechart")).getByText(/1/i),
-    ).toBeVisible();
-
-    expect(
-      within(screen.getByTestId("security-issues-barchart")).getByText(
-        /codegate-context-retriever/i,
-      ),
-    ).toBeVisible();
+    await waitFor(() => {
+      expect(
+        within(screen.getByTestId("alerts-table")).getAllByRole("row").length,
+      ).toBeGreaterThan(1);
+    });
 
     expect(
       screen.getByRole("gridcell", {
@@ -226,9 +213,11 @@ describe("Dashboard", () => {
     mockAlertsWithMaliciousPkg();
     render(<RouteDashboard />);
 
-    expect(
-      (await screen.findAllByTestId(/mock-responsive-container/i)).length,
-    ).toEqual(2);
+    await waitFor(() => {
+      expect(
+        within(screen.getByTestId("alerts-table")).getAllByRole("row").length,
+      ).toBeGreaterThan(1);
+    });
 
     expect(screen.getByTestId(/alerts-count/i)).toHaveTextContent("2");
     expect(
@@ -267,9 +256,11 @@ describe("Dashboard", () => {
     mockAlertsWithMaliciousPkg();
     render(<RouteDashboard />);
 
-    expect(
-      (await screen.findAllByTestId(/mock-responsive-container/i)).length,
-    ).toEqual(2);
+    await waitFor(() => {
+      expect(
+        within(screen.getByTestId("alerts-table")).getAllByRole("row").length,
+      ).toBeGreaterThan(1);
+    });
 
     expect(screen.getByTestId(/alerts-count/i)).toHaveTextContent("2");
     expect(
@@ -291,9 +282,12 @@ describe("Dashboard", () => {
 
   it("should sort alerts by date desc", async () => {
     render(<RouteDashboard />);
-    expect(
-      (await screen.findAllByTestId(/mock-responsive-container/i)).length,
-    ).toEqual(1);
+
+    await waitFor(() => {
+      expect(
+        within(screen.getByTestId("alerts-table")).getAllByRole("row").length,
+      ).toBeGreaterThan(1);
+    });
 
     const firstRow = within(screen.getByTestId("alerts-table")).getAllByRole(
       "row",
diff --git a/src/routes/route-dashboard.tsx b/src/routes/route-dashboard.tsx
index 76a368dc..4f469fdd 100644
--- a/src/routes/route-dashboard.tsx
+++ b/src/routes/route-dashboard.tsx
@@ -1,22 +1,19 @@
 import { Separator } from "@stacklok/ui-kit";
 import { useEffect } from "react";
-import { BarChart } from "@/viz/BarChart";
-import { LineChart } from "@/viz/LineChart";
-import { PieChart } from "@/viz/PieChart";
 import { useSearchParams } from "react-router-dom";
-import {
-  useAlertsData,
-  useMaliciousPackagesChartData,
-} from "@/hooks/useAlertsData";
+import { useAlertsData } from "@/hooks/useAlertsData";
 import { useAlertSearch } from "@/hooks/useAlertSearch";
 import { TableAlerts } from "@/features/alerts/components/table-alerts";
+import { AlertsSummaryMaliciousPkg } from "@/features/alerts/components/alerts-summary-malicious-pkg";
+import { AlertsSummaryWorkspaceTokenUsage } from "@/features/alerts/components/alerts-summary-workspace-token-usage";
+import { AlertsSummaryMaliciousSecrets } from "@/features/alerts/components/alerts-summary-secrets";
 
 export function RouteDashboard() {
   const [searchParams] = useSearchParams();
 
   const { setIsMaliciousFilterActive, setSearch } = useAlertSearch();
 
-  const { data: alerts = [], isLoading } = useAlertsData();
+  const { data: alerts = [] } = useAlertsData();
 
   useEffect(() => {
     const isMaliciousFilterActive = searchParams.get("maliciousPkg") === "true";
@@ -29,14 +26,12 @@ export function RouteDashboard() {
     }
   }, [searchParams, setIsMaliciousFilterActive, setSearch, alerts]);
 
-  const maliciousPackages = useMaliciousPackagesChartData();
-
   return (
     <div className="flex-col">
-      <div className="grid 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 items-stretch gap-4 w-full">
-        <BarChart data={alerts} loading={isLoading} />
-        <PieChart data={maliciousPackages} loading={isLoading} />
-        <LineChart data={alerts} loading={isLoading} />
+      <div className="grid 2xl:grid-cols-3 sm:grid-cols-3 grid-cols-1 items-stretch gap-4 w-full">
+        <AlertsSummaryMaliciousPkg />
+        <AlertsSummaryMaliciousSecrets />
+        <AlertsSummaryWorkspaceTokenUsage />
       </div>
 
       <Separator className="my-8" />
diff --git a/src/viz/BarChart.tsx b/src/viz/BarChart.tsx
deleted file mode 100644
index cbf4cd69..00000000
--- a/src/viz/BarChart.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { AlertConversation } from "@/api/generated/types.gen";
-import { Card, CardBody, CardHeader, CardTitle } from "@stacklok/ui-kit";
-import { Skeleton } from "@stacklok/ui-kit";
-import { getAllIssues } from "@/lib/utils";
-
-export function BarChart({
-  data,
-  loading,
-}: {
-  loading: boolean;
-  data: AlertConversation[];
-}) {
-  const { maxCount, sortedTagCounts } = getAllIssues(data);
-
-  if (loading) {
-    return (
-      <Card className="h-full" data-testid="security-issues-barchart">
-        <CardHeader>
-          <CardTitle>Security issues detected</CardTitle>
-        </CardHeader>
-        <CardBody>
-          {Array.from({ length: 4 }).map((_, index) => (
-            <div
-              key={index}
-              className="flex w-full items-center justify-around mb-4"
-            >
-              <Skeleton key={index} className="w-full h-3" />
-            </div>
-          ))}
-        </CardBody>
-      </Card>
-    );
-  }
-
-  if (sortedTagCounts.length === 0) {
-    return (
-      <Card className="h-full" data-testid="security-issues-barchart">
-        <CardHeader className="shrink-0">
-          <CardTitle>Security issues detected</CardTitle>
-        </CardHeader>
-        <CardBody className="flex items-center h-2/3">
-          <div className="bg-gray-100 size-full flex items-center justify-center font-bold text-lg">
-            N/A
-          </div>
-        </CardBody>
-      </Card>
-    );
-  }
-
-  return (
-    <Card className="h-full" data-testid="security-issues-barchart">
-      <CardHeader className="shrink-0">
-        <CardTitle>Security issues detected</CardTitle>
-      </CardHeader>
-      <CardBody>
-        <div className="space-y-3 max-h-[270px] overflow-y-auto">
-          {sortedTagCounts.map(([tag, count], index) => (
-            <div key={index} className="flex items-center space-x-4">
-              <span className="w-2/4 text-sm font-medium text-secondary truncate">
-                {tag}
-              </span>
-              <div className="flex-1 h-4 bg-gray-200 rounded-lg overflow-hidden">
-                <div
-                  className="h-full bg-brand-700 rounded-lg"
-                  style={{
-                    width: `${(count / maxCount) * 100}%`,
-                  }}
-                ></div>
-              </div>
-              <span
-                className="text-sm font-medium text-secondary"
-                data-testid={`${tag}-count`}
-              >
-                {count}
-              </span>
-            </div>
-          ))}
-        </div>
-      </CardBody>
-    </Card>
-  );
-}
diff --git a/src/viz/LineChart.tsx b/src/viz/LineChart.tsx
deleted file mode 100644
index 8f83fe65..00000000
--- a/src/viz/LineChart.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client";
-
-import {
-  CartesianGrid,
-  LabelList,
-  Line,
-  LineChart as LineChartsUI,
-  XAxis,
-} from "recharts";
-
-import { Card, CardBody, CardHeader, CardTitle } from "@stacklok/ui-kit";
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
-import { Skeleton } from "@stacklok/ui-kit";
-import { AlertConversation } from "@/api/generated/types.gen";
-
-const aggregateAlertsByDate = (alerts: { timestamp: string }[]) => {
-  const dateMap: Record<string, { date: string; alerts: number }> = {};
-
-  alerts
-    .sort(
-      (a, b) =>
-        new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
-    )
-    .reduce((acc, alert) => {
-      const timestamp = new Date(alert.timestamp);
-      const formattedDate = timestamp.toLocaleDateString("en-US", {
-        month: "short",
-        day: "2-digit",
-      });
-
-      if (!acc[formattedDate]) {
-        acc[formattedDate] = { date: formattedDate, alerts: 0 };
-      }
-      (acc[formattedDate] as { alerts: number }).alerts += 1;
-
-      return acc;
-    }, dateMap);
-
-  return Object.values(dateMap);
-};
-
-const chartConfig = {
-  alerts: {
-    label: "Alerts",
-    color: "var(--brand-700)",
-  },
-} satisfies ChartConfig;
-
-export function LineChart({
-  data,
-  loading,
-}: {
-  data: AlertConversation[];
-  loading: boolean;
-}) {
-  const chartData = aggregateAlertsByDate(data);
-
-  if (loading) {
-    return (
-      <Card className="h-full">
-        <CardHeader>
-          <CardTitle>Alerts by date</CardTitle>
-        </CardHeader>
-        <CardBody>
-          {Array.from({ length: 6 }).map((_, index) => (
-            <div
-              key={index}
-              className="flex w-full items-center justify-around mb-4"
-            >
-              <Skeleton key={index} className="w-full h-3" />
-            </div>
-          ))}
-        </CardBody>
-      </Card>
-    );
-  }
-
-  return (
-    <Card className="h-full" data-testid="linechart">
-      <CardHeader>
-        <CardTitle>Alerts by date</CardTitle>
-      </CardHeader>
-      <CardBody>
-        <ChartContainer config={chartConfig} className="min-h-40">
-          <LineChartsUI
-            accessibilityLayer
-            data={chartData}
-            height={300}
-            width={500}
-            margin={{
-              top: 20,
-              left: 12,
-              right: 12,
-              bottom: 40,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              angle={-90}
-              textAnchor="end"
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="line" />}
-              
-            />
-            <Line
-              dataKey="alerts"
-              type="natural"
-              stroke="var(--brand-700)"
-              strokeWidth={2}
-              dot={{
-                fill: "var(--brand-700)",
-                stroke: "var(--brand-700)",
-              }}
-              activeDot={{
-                r: 6,
-              }}
-            >
-              <LabelList
-                position="top"
-                offset={12}
-                className="fill-gray-50"
-                fontSize={12}
-              />
-            </Line>
-          </LineChartsUI>
-        </ChartContainer>
-      </CardBody>
-    </Card>
-  );
-}
diff --git a/src/viz/PieChart.tsx b/src/viz/PieChart.tsx
deleted file mode 100644
index aab2aa95..00000000
--- a/src/viz/PieChart.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import * as React from "react";
-import { Label, Pie, PieChart as PieChartUI } from "recharts";
-
-import { Card, CardBody, CardHeader, CardTitle } from "@stacklok/ui-kit";
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
-import { MaliciousPkgType } from "@/types";
-import { Skeleton } from "@stacklok/ui-kit";
-
-const COLORS = [
-  "var(--brand-700)",
-  "var(--brand-800)",
-  "var(--brand-900)",
-  "var(--brand-950)",
-] as const;
-
-const generateTypeColors = (data: MaliciousPkgType[]) => {
-  const uniqueTypes = Array.from(new Set(data.map((pkg) => pkg.type)));
-  return uniqueTypes.reduce<Record<string, string>>((acc, type, index) => {
-    const colorIndex = index > COLORS.length - 1 ? COLORS.length - 1 : index;
-    acc[type] = COLORS[colorIndex] as string;
-    return acc;
-  }, {});
-};
-
-const getChartData = (
-  data: MaliciousPkgType[],
-  typeColors: Record<string, string>,
-) => {
-  const typeCounts: Record<string, number> = {};
-  data.forEach((pkg) => {
-    typeCounts[pkg.type] = (typeCounts[pkg.type] || 0) + 1;
-  });
-
-  return Object.entries(typeCounts).map(([type, count]) => ({
-    name: type,
-    value: count,
-    fill: typeColors[type] || "hsl(var(--brand-700))",
-  }));
-};
-
-const getChartConfig = (typeColors: Record<string, string>) => {
-  const config: ChartConfig = {};
-  Object.entries(typeColors).forEach(([type, color]) => {
-    config[type] = {
-      label: type.charAt(0).toUpperCase() + type.slice(1),
-      color,
-    };
-  });
-  return config;
-};
-
-type PieChartProps = {
-  data: MaliciousPkgType[];
-  loading: boolean;
-};
-
-export function PieChart({ data, loading }: PieChartProps) {
-  const typeColors = React.useMemo(() => generateTypeColors(data), [data]);
-  const chartConfig = React.useMemo(
-    () => getChartConfig(typeColors),
-    [typeColors],
-  );
-  const chartData = React.useMemo(
-    () => getChartData(data, typeColors),
-    [data, typeColors],
-  );
-  const totalMalicious = React.useMemo(
-    () => chartData.reduce((acc, curr) => acc + curr.value, 0),
-    [chartData],
-  );
-
-  if (loading) {
-    return (
-      <Card className="h-full" data-testid="malicious-piechart">
-        <CardHeader>
-          <CardTitle>Malicious packages by type</CardTitle>
-        </CardHeader>
-        <CardBody className="flex justify-center">
-          <div className="flex justify-center text-sm">
-            <Skeleton className="size-40 rounded-full" />
-          </div>
-        </CardBody>
-      </Card>
-    );
-  }
-
-  if (data.length === 0) {
-    return (
-      <Card className="h-full" data-testid="malicious-piechart">
-        <CardHeader>
-          <CardTitle>Malicious packages by type</CardTitle>
-        </CardHeader>
-        <CardBody className="flex justify-center">
-          <div className="bg-gray-100 rounded-full flex items-center justify-center size-40 font-bold text-lg">
-            N/A
-          </div>
-        </CardBody>
-      </Card>
-    );
-  }
-
-  return (
-    <Card className="h-full" data-testid="malicious-piechart">
-      <CardHeader className="items-center">
-        <CardTitle>Malicious packages by type</CardTitle>
-      </CardHeader>
-      <CardBody>
-        <ChartContainer config={chartConfig} className="mx-auto">
-          <PieChartUI width={400} height={300}>
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
-            />
-            <Pie
-              data={chartData}
-              dataKey="value"
-              nameKey="name"
-              innerRadius={60}
-              outerRadius={80}
-              strokeWidth={5}
-              fill="red"
-            >
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-                    return (
-                      <text
-                        x={viewBox.cx}
-                        y={viewBox.cy}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        <tspan
-                          x={viewBox.cx}
-                          y={viewBox.cy}
-                          className="fill-gray-900 text-3xl font-bold"
-                        >
-                          {totalMalicious}
-                        </tspan>
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy || 0) + 24}
-                          className="fill-gray-900"
-                        >
-                          {totalMalicious > 1 ? "packages" : "package"}
-                        </tspan>
-                      </text>
-                    );
-                  }
-                }}
-              />
-            </Pie>
-          </PieChartUI>
-        </ChartContainer>
-      </CardBody>
-    </Card>
-  );
-}

From fc09eabbc2a5f393a76b034e98bcff514f32b1d7 Mon Sep 17 00:00:00 2001
From: alex-mcgovern <alex_mcgovernsmith@icloud.com>
Date: Wed, 29 Jan 2025 13:43:46 +0000
Subject: [PATCH 2/2] chore: use untitled icons

---
 package-lock.json                             | 381 +-----------------
 package.json                                  |   3 +
 .../alerts-summary-malicious-pkg.tsx          |   6 +-
 .../components/alerts-summary-secrets.tsx     |   4 +-
 .../alerts-summary-workspace-token-usage.tsx  |   6 +-
 .../alerts/components/alerts-summary.tsx      |   5 +-
 6 files changed, 35 insertions(+), 370 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5bed80d8..a159e96b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,6 @@
         "react-markdown": "^9.0.1",
         "react-router-dom": "^7.1.1",
         "react-syntax-highlighter": "^15.6.1",
-        "recharts": "^2.15.0",
         "remark-gfm": "^4.0.0",
         "tailwind-merge": "^2.5.5",
         "tailwind-variants": "^0.3.0",
@@ -71,6 +70,9 @@
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^3.0.4",
         "vitest-fail-on-console": "^0.7.1"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-darwin-arm64": "^4.32.1"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3662,13 +3664,12 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.29.1.tgz",
-      "integrity": "sha512-2ORr7T31Y0Mnk6qNuwtyNmy14MunTAMx06VAPI6/Ju52W10zk1i7i5U3vlDRWjhOI5quBcrvhkCHyF76bI7kEw==",
+      "version": "4.32.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.32.1.tgz",
+      "integrity": "sha512-zCpKHioQ9KgZToFp5Wvz6zaWbMzYQ2LJHQ+QixDKq52KKrF65ueu6Af4hLlLWHjX1Wf/0G5kSJM9PySW9IrvHA==",
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4347,69 +4348,6 @@
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
       "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
     },
-    "node_modules/@types/d3-array": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
-      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-color": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
-      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-ease": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
-      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-interpolate": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
-      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-color": "*"
-      }
-    },
-    "node_modules/@types/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-scale": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
-      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-time": "*"
-      }
-    },
-    "node_modules/@types/d3-shape": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
-      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-path": "*"
-      }
-    },
-    "node_modules/@types/d3-time": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
-      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-timer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
-      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
-      "license": "MIT"
-    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -5940,127 +5878,6 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
-    "node_modules/d3-array": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
-      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
-      "license": "ISC",
-      "dependencies": {
-        "internmap": "1 - 2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-color": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-ease": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
-      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-format": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
-      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-color": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-scale": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
-      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "2.10.0 - 3",
-        "d3-format": "1 - 3",
-        "d3-interpolate": "1.2.0 - 3",
-        "d3-time": "2.1.1 - 3",
-        "d3-time-format": "2 - 4"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-shape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
-      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-path": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-time": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
-      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-array": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-time-format": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
-      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
-      "license": "ISC",
-      "dependencies": {
-        "d3-time": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-timer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
-      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/data-urls": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@@ -6108,12 +5925,6 @@
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "license": "MIT"
     },
-    "node_modules/decimal.js-light": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
-      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
-      "license": "MIT"
-    },
     "node_modules/decode-named-character-reference": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
@@ -6229,16 +6040,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dotenv": {
       "version": "16.4.7",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
@@ -6671,15 +6472,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fast-equals": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
-      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -7437,15 +7229,6 @@
       "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
       "license": "MIT"
     },
-    "node_modules/internmap": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
-      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/intl-messageformat": {
       "version": "10.7.11",
       "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.11.tgz",
@@ -7727,8 +7510,7 @@
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -8088,8 +7870,7 @@
     },
     "node_modules/lodash": {
       "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.castarray": {
@@ -8189,18 +7970,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
     "node_modules/loupe": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
@@ -10116,23 +9885,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "node_modules/prop-types/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
-    },
     "node_modules/property-information": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
@@ -10320,12 +10072,6 @@
         "react": "^19.0.0"
       }
     },
-    "node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT"
-    },
     "node_modules/react-markdown": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
@@ -10439,21 +10185,6 @@
         "react-dom": ">=18"
       }
     },
-    "node_modules/react-smooth": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
-      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-equals": "^5.0.1",
-        "prop-types": "^15.8.1",
-        "react-transition-group": "^4.4.5"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/react-stately": {
       "version": "3.34.0",
       "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.34.0.tgz",
@@ -10538,22 +10269,6 @@
         "node": "*"
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10575,44 +10290,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/recharts": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.0.tgz",
-      "integrity": "sha512-cIvMxDfpAmqAmVgc4yb7pgm/O1tmmkl/CjrvXuW+62/+7jj/iF9Ykm+hb/UJt42TREHMyd3gb+pkgoa2MxgDIw==",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^2.0.0",
-        "eventemitter3": "^4.0.1",
-        "lodash": "^4.17.21",
-        "react-is": "^18.3.1",
-        "react-smooth": "^4.0.0",
-        "recharts-scale": "^0.4.4",
-        "tiny-invariant": "^1.3.1",
-        "victory-vendor": "^36.6.8"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/recharts-scale": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
-      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
-      "license": "MIT",
-      "dependencies": {
-        "decimal.js-light": "^2.4.1"
-      }
-    },
-    "node_modules/recharts/node_modules/eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "license": "MIT"
-    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -10951,6 +10628,20 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.29.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.29.1.tgz",
+      "integrity": "sha512-2ORr7T31Y0Mnk6qNuwtyNmy14MunTAMx06VAPI6/Ju52W10zk1i7i5U3vlDRWjhOI5quBcrvhkCHyF76bI7kEw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
     "node_modules/rrweb-cssom": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
@@ -11645,12 +11336,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/tiny-invariant": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
-      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
-      "license": "MIT"
-    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -12205,28 +11890,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/victory-vendor": {
-      "version": "36.9.2",
-      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
-      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
-      "license": "MIT AND ISC",
-      "dependencies": {
-        "@types/d3-array": "^3.0.3",
-        "@types/d3-ease": "^3.0.0",
-        "@types/d3-interpolate": "^3.0.1",
-        "@types/d3-scale": "^4.0.2",
-        "@types/d3-shape": "^3.1.0",
-        "@types/d3-time": "^3.0.0",
-        "@types/d3-timer": "^3.0.0",
-        "d3-array": "^3.1.6",
-        "d3-ease": "^3.0.1",
-        "d3-interpolate": "^3.0.1",
-        "d3-scale": "^4.0.2",
-        "d3-shape": "^3.1.0",
-        "d3-time": "^3.0.0",
-        "d3-timer": "^3.0.1"
-      }
-    },
     "node_modules/vite": {
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.7.tgz",
diff --git a/package.json b/package.json
index 50d8196f..45af9315 100644
--- a/package.json
+++ b/package.json
@@ -85,5 +85,8 @@
   },
   "overrides": {
     "vite": "^6.0.1"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-darwin-arm64": "^4.32.1"
   }
 }
diff --git a/src/features/alerts/components/alerts-summary-malicious-pkg.tsx b/src/features/alerts/components/alerts-summary-malicious-pkg.tsx
index b43dfd53..f497c399 100644
--- a/src/features/alerts/components/alerts-summary-malicious-pkg.tsx
+++ b/src/features/alerts/components/alerts-summary-malicious-pkg.tsx
@@ -1,4 +1,4 @@
-import { Box } from "lucide-react";
+import { PackageX } from "@untitled-ui/icons-react";
 import { AlertsSummary } from "./alerts-summary";
 import { useQueryGetWorkspaceAlertsMaliciousPkg } from "../hooks/use-query-get-workspace-alerts-malicious-pkg";
 
@@ -9,7 +9,9 @@ export function AlertsSummaryMaliciousPkg() {
     <AlertsSummary
       isPending={isPending}
       title="Malicious packages"
-      statistics={[{ count: data.length, id: "malicious-count", Icon: Box }]}
+      statistics={[
+        { count: data.length, id: "malicious-count", Icon: PackageX },
+      ]}
     />
   );
 }
diff --git a/src/features/alerts/components/alerts-summary-secrets.tsx b/src/features/alerts/components/alerts-summary-secrets.tsx
index 32443819..ff51450a 100644
--- a/src/features/alerts/components/alerts-summary-secrets.tsx
+++ b/src/features/alerts/components/alerts-summary-secrets.tsx
@@ -1,4 +1,4 @@
-import { Key } from "lucide-react";
+import { Key01 } from "@untitled-ui/icons-react";
 import { AlertsSummary } from "./alerts-summary";
 import { useQueryGetWorkspaceAlertSecrets } from "../hooks/use-query-get-workspace-alerts-secrets";
 
@@ -9,7 +9,7 @@ export function AlertsSummaryMaliciousSecrets() {
     <AlertsSummary
       isPending={isPending}
       title="Secrets redacted"
-      statistics={[{ count: data.length, id: "secrets-count", Icon: Key }]}
+      statistics={[{ count: data.length, id: "secrets-count", Icon: Key01 }]}
     />
   );
 }
diff --git a/src/features/alerts/components/alerts-summary-workspace-token-usage.tsx b/src/features/alerts/components/alerts-summary-workspace-token-usage.tsx
index 5b2ec6bc..18ee8515 100644
--- a/src/features/alerts/components/alerts-summary-workspace-token-usage.tsx
+++ b/src/features/alerts/components/alerts-summary-workspace-token-usage.tsx
@@ -1,4 +1,4 @@
-import { Download, Upload } from "lucide-react";
+import { Download01, Upload01 } from "@untitled-ui/icons-react";
 import { AlertsSummary } from "./alerts-summary";
 import { useQueryGetWorkspaceTokenUsage } from "../hooks/use-query-get-workspace-token-usage";
 
@@ -15,12 +15,12 @@ export function AlertsSummaryWorkspaceTokenUsage() {
         {
           count: data?.input_tokens ?? 0,
           id: "usage-input-tokens",
-          Icon: Upload,
+          Icon: Upload01,
         },
         {
           count: data?.output_tokens ?? 0,
           id: "usage-output-tokens",
-          Icon: Download,
+          Icon: Download01,
         },
       ]}
     />
diff --git a/src/features/alerts/components/alerts-summary.tsx b/src/features/alerts/components/alerts-summary.tsx
index 3d71a27b..c04233ad 100644
--- a/src/features/alerts/components/alerts-summary.tsx
+++ b/src/features/alerts/components/alerts-summary.tsx
@@ -1,5 +1,4 @@
 import { Card, CardBody, Heading, Skeleton } from "@stacklok/ui-kit";
-import { LucideProps } from "lucide-react";
 import { ComponentProps } from "react";
 
 function AlertsSummaryStatistic({
@@ -9,9 +8,7 @@ function AlertsSummaryStatistic({
 }: {
   count: number;
   id: string;
-  Icon: React.ForwardRefExoticComponent<
-    Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
-  >;
+  Icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
 }) {
   return (
     <div id={id} className="text-5xl flex items-center gap-1">