diff --git a/packages/views/runtimes/components/charts/daily-token-chart.tsx b/packages/views/runtimes/components/charts/daily-token-chart.tsx
index d37efc180..ea06f1a73 100644
--- a/packages/views/runtimes/components/charts/daily-token-chart.tsx
+++ b/packages/views/runtimes/components/charts/daily-token-chart.tsx
@@ -1,34 +1,118 @@
+import { useMemo } from "react";
 import {
   AreaChart,
   Area,
   XAxis,
   YAxis,
   CartesianGrid,
+  Tooltip,
 } from "recharts";
 import {
   ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
   type ChartConfig,
 } from "@multica/ui/components/ui/chart";
 import type { DailyTokenData } from "../../utils";
 import { formatTokens } from "../../utils";
 
 const tokenChartConfig = {
-  input: { label: "Input", color: "hsl(var(--chart-1))" },
-  output: { label: "Output", color: "hsl(var(--chart-2))" },
-  cacheRead: { label: "Cache Read", color: "hsl(var(--chart-3))" },
-  cacheWrite: { label: "Cache Write", color: "hsl(var(--chart-4))" },
+  total: { label: "Total", color: "hsl(var(--chart-1))" },
 } satisfies ChartConfig;
 
+type DailyTokenRow = DailyTokenData & { total: number };
+
+function computeNiceTicks(data: DailyTokenRow[], tickCount = 5): number[] {
+  const maxTotal = data.reduce(
+    (max, d) => (d.total > max ? d.total : max),
+    0,
+  );
+  if (maxTotal === 0) return [0];
+
+  const rawStep = maxTotal / (tickCount - 1);
+  const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
+  const niceSteps = [1, 2, 2.5, 5, 10];
+  const niceStep =
+    magnitude * (niceSteps.find((s) => s * magnitude >= rawStep) ?? 10);
+
+  const ticks: number[] = [];
+  for (let i = 0; i < tickCount; i++) {
+    ticks.push(niceStep * i);
+  }
+  if ((ticks[ticks.length - 1] ?? 0) < maxTotal) {
+    ticks.push(niceStep * tickCount);
+  }
+  return ticks;
+}
+
+function TokenTooltipContent({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean;
+  payload?: Array<{ payload: DailyTokenRow }>;
+  label?: string;
+}) {
+  if (!active || !payload?.length) return null;
+  const row = payload[0]!.payload;
+
+  const items = [
+    { label: "Input", value: row.input },
+    { label: "Output", value: row.output },
+    { label: "Cache Read", value: row.cacheRead },
+    { label: "Cache Write", value: row.cacheWrite },
+  ];
+
+  return (
+    <div className="rounded-lg border border-border/50 bg-background px-3 py-2 text-xs shadow-xl">
+      <div className="font-medium mb-1.5">{label}</div>
+      <div className="grid gap-1">
+        {items.map((item) => (
+          <div
+            key={item.label}
+            className="flex items-center justify-between gap-6"
+          >
+            <span className="text-muted-foreground">{item.label}</span>
+            <span className="font-mono font-medium tabular-nums">
+              {formatTokens(item.value)}
+            </span>
+          </div>
+        ))}
+        <div className="flex items-center justify-between gap-6 border-t pt-1 mt-0.5 font-medium">
+          <span>Total</span>
+          <span className="font-mono tabular-nums">
+            {formatTokens(row.total)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function DailyTokenChart({ data }: { data: DailyTokenData[] }) {
+  const chartData = useMemo<DailyTokenRow[]>(
+    () =>
+      data.map((d) => ({
+        ...d,
+        total: d.input + d.output + d.cacheRead + d.cacheWrite,
+      })),
+    [data],
+  );
+  const ticks = useMemo(() => computeNiceTicks(chartData), [chartData]);
+  const yMax = ticks[ticks.length - 1] ?? 0;
+
   return (
     <div className="rounded-lg border p-4">
-      <h4 className="text-xs font-medium text-muted-foreground mb-3">Daily Token Usage</h4>
-      <ChartContainer config={tokenChartConfig} className="aspect-[2.5/1] w-full">
-        <AreaChart data={data} margin={{ left: 0, right: 0, top: 4, bottom: 0 }}>
+      <h4 className="text-xs font-medium text-muted-foreground mb-3">
+        Daily Token Usage
+      </h4>
+      <ChartContainer
+        config={tokenChartConfig}
+        className="aspect-[2.5/1] w-full"
+      >
+        <AreaChart
+          data={chartData}
+          margin={{ left: 0, right: 0, top: 4, bottom: 0 }}
+        >
           <CartesianGrid vertical={false} />
           <XAxis
             dataKey="label"
@@ -38,53 +122,22 @@ export function DailyTokenChart({ data }: { data: DailyTokenData[] }) {
             interval="preserveStartEnd"
           />
           <YAxis
+            type="number"
             tickLine={false}
             axisLine={false}
             tickMargin={8}
             tickFormatter={(v: number) => formatTokens(v)}
-            width={50}
+            width={65}
+            domain={[0, yMax]}
+            ticks={ticks}
           />
-          <ChartTooltip
-            content={
-              <ChartTooltipContent
-                formatter={(value) =>
-                  typeof value === "number" ? formatTokens(value) : String(value)
-                }
-              />
-            }
-          />
-          <ChartLegend content={<ChartLegendContent />} />
+          <Tooltip content={<TokenTooltipContent />} />
           <Area
             type="monotone"
-            dataKey="input"
-            stackId="1"
-            stroke="var(--color-input)"
-            fill="var(--color-input)"
-            fillOpacity={0.4}
-          />
-          <Area
-            type="monotone"
-            dataKey="output"
-            stackId="1"
-            stroke="var(--color-output)"
-            fill="var(--color-output)"
-            fillOpacity={0.4}
-          />
-          <Area
-            type="monotone"
-            dataKey="cacheRead"
-            stackId="1"
-            stroke="var(--color-cacheRead)"
-            fill="var(--color-cacheRead)"
-            fillOpacity={0.4}
-          />
-          <Area
-            type="monotone"
-            dataKey="cacheWrite"
-            stackId="1"
-            stroke="var(--color-cacheWrite)"
-            fill="var(--color-cacheWrite)"
-            fillOpacity={0.4}
+            dataKey="total"
+            stroke="var(--color-total)"
+            fill="var(--color-total)"
+            fillOpacity={0.3}
           />
         </AreaChart>
       </ChartContainer>
diff --git a/packages/views/runtimes/utils.ts b/packages/views/runtimes/utils.ts
index 1096301fa..63218b681 100644
--- a/packages/views/runtimes/utils.ts
+++ b/packages/views/runtimes/utils.ts
@@ -14,8 +14,14 @@ export function formatLastSeen(lastSeenAt: string | null): string {
 }
 
 export function formatTokens(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  if (n >= 1_000_000) {
+    const m = n / 1_000_000;
+    return m % 1 < 0.05 ? `${Math.round(m)}M` : `${m.toFixed(1)}M`;
+  }
+  if (n >= 1_000) {
+    const k = n / 1_000;
+    return k % 1 < 0.05 ? `${Math.round(k)}K` : `${k.toFixed(1)}K`;
+  }
   return n.toLocaleString();
 }