fix(playbooks): show small AI action costs

Playbook run pages rounded AI generation costs to two decimal places, so small but non-zero costs appeared as /usr/sbin/bash.00.

Format sub-cent AI costs with enough precision to remain visible, and add Shadcn tooltips that show the exact cost plus token details for run totals.

Cover the run total and action tab states with Storybook stories and focused formatter/component tests.

Author: adityathebe

src/components/Playbooks/Runs/Actions/AICostTooltip.tsx

@@ -0,0 +1,32 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "@flanksource-ui/components/ui/tooltip";
+import type { ReactElement, ReactNode } from "react";
+import { formatExactAICost } from "./cost";
+
+type AICostTooltipProps = {
+  children: ReactElement;
+  cost: number;
+  details?: ReactNode;
+};
+
+export function AICostTooltip({ children, cost, details }: AICostTooltipProps) {
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side="top" className="max-w-none">
+          <div className="space-y-1">
+            <div>
+              Cost: <span className="font-mono">{formatExactAICost(cost)}</span>
+            </div>
+            {details && <div className="text-gray-300">{details}</div>}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

src/components/Playbooks/Runs/Actions/PlaybookRunsActions.stories.tsx

@@ -0,0 +1,125 @@
+import { PlaybookRunWithActions } from "@flanksource-ui/api/types/playbooks";
+import { HttpResponse, http } from "msw";
+import { ComponentProps } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import PlaybookRunDetailView from "./PlaybookRunsActions";
+
+const aiAction = {
+  playbook_run_id: "run-1",
+  id: "action-ai",
+  name: "analyse",
+  status: "completed" as const,
+  start_time: "2026-07-08T12:53:40Z",
+  end_time: "2026-07-08T12:53:49Z",
+  type: "ai" as const,
+  result: {
+    json: JSON.stringify(
+      {
+        headline: "flanksource-ui/Release Unhealthy: Repository Access Blocked",
+        summary:
+          "The workflow is unhealthy because repository access is blocked.",
+        recommended_fix:
+          "Verify repository access and GitHub token permissions."
+      },
+      null,
+      2
+    ),
+    generationInfo: [
+      {
+        cost: 0.0018809,
+        model: "gemini-2.5-flash",
+        inputTokens: 778,
+        outputTokens: 131,
+        reasoningTokens: 528
+      },
+      {
+        cost: 0.0017708999999999997,
+        model: "gemini-2.5-flash",
+        inputTokens: 4053,
+        outputTokens: 10,
+        reasoningTokens: 212
+      }
+    ]
+  }
+};
+
+const notificationAction = {
+  playbook_run_id: "run-1",
+  id: "action-notification",
+  name: "send recommended playbooks",
+  status: "completed" as const,
+  start_time: "2026-07-08T12:53:49Z",
+  end_time: "2026-07-08T12:53:50Z",
+  type: "notification" as const,
+  result: {
+    title: "Recommended playbooks",
+    message: "Recommendation sent"
+  }
+};
+
+const playbookRun = {
+  id: "run-1",
+  playbook_id: "playbook-1",
+  spec: {
+    actions: [
+      { name: "send recommended playbooks", notification: {} },
+      { name: "analyse", ai: {} }
+    ]
+  },
+  playbooks: {
+    id: "playbook-1",
+    name: "Recommend Playbooks",
+    title: "Recommend Playbooks",
+    source: "UI",
+    created_at: "2026-07-08T12:53:00Z",
+    updated_at: "2026-07-08T12:53:00Z",
+    spec: {
+      actions: [
+        { name: "send recommended playbooks", notification: {} },
+        { name: "analyse", ai: {} }
+      ]
+    }
+  },
+  status: "completed",
+  created_at: "2026-07-08T12:53:40Z",
+  scheduled_time: "2026-07-08T12:53:40Z",
+  start_time: "2026-07-08T12:53:40Z",
+  end_time: "2026-07-08T12:53:50Z",
+  config: {
+    id: "config-1",
+    name: "flanksource-ui/Release",
+    type: "GitHubAction",
+    config_class: "Deployment"
+  },
+  actions: [notificationAction, aiAction]
+} satisfies PlaybookRunWithActions;
+
+export default {
+  title: "Components/PlaybookRunDetailView",
+  component: PlaybookRunDetailView,
+  parameters: {
+    msw: {
+      handlers: [
+        http.get("/api/db/playbook_run_actions", () => {
+          return HttpResponse.json([aiAction]);
+        })
+      ]
+    }
+  }
+} satisfies Meta<ComponentProps<typeof PlaybookRunDetailView>>;
+
+const Template: StoryFn<ComponentProps<typeof PlaybookRunDetailView>> = (
+  args
+) => <PlaybookRunDetailView {...args} />;
+
+export const SmallTotalCost = Template.bind({});
+SmallTotalCost.args = {
+  data: playbookRun
+};
+SmallTotalCost.decorators = [
+  (Story) => (
+    <div className="h-[620px] w-[1120px] pt-12">
+      <Story />
+    </div>
+  )
+];

src/components/Playbooks/Runs/Actions/PlaybookRunsActions.tsx

@@ -16,7 +16,6 @@ import { VscFileCode } from "react-icons/vsc";
 import { FaCog } from "react-icons/fa";
 import { Link } from "react-router-dom";
 import { FaFileAlt } from "react-icons/fa";
-import { Tooltip } from "react-tooltip";
 import PlaybookSpecIcon from "../../Settings/PlaybookSpecIcon";
 import { ApprovePlaybookButton } from "../ApprovePlaybookButton";
 import { CancelPlaybookButton } from "../CancelPlaybookButton";
@@ -36,6 +35,8 @@ import { AiFeatureRequest } from "@flanksource-ui/ui/Layout/AiFeatureLoader";
 import { useFeatureFlagsContext } from "@flanksource-ui/context/FeatureFlagsContext";
 import { features } from "@flanksource-ui/services/permissions/features";
 import { Button } from "@flanksource-ui/ui/Buttons/Button";
+import { formatAICost } from "./cost";
+import { AICostTooltip } from "./AICostTooltip";
 
 const LazyDiagnoseButton = lazy(() =>
   import("../DiagnosePlaybookFailureButton").then((module) => ({
@@ -146,6 +147,8 @@ export default function PlaybookRunDetailView({
     };
   }, [data.actions]);
 
+  const totalTokens = totalInputTokens + totalOutputTokens;
+
   return (
     <div className="flex flex-1 flex-col gap-2 pl-2">
       <div className="flex flex-wrap py-4">
@@ -335,14 +338,15 @@ export default function PlaybookRunDetailView({
             <div className="mb-2 ml-[-25px] mr-[-15px] flex flex-row items-center justify-between border-t border-gray-200 py-2 pl-[25px]">
               <div className="font-semibold text-gray-600">
                 Actions{" "}
-                {(totalInputTokens > 0 || totalOutputTokens > 0) && (
-                  <span
-                    data-tooltip-id="action-cost-tooltip"
-                    data-tooltip-content={`${(totalInputTokens + totalOutputTokens).toLocaleString()} tokens (${totalInputTokens.toLocaleString()} input + ${totalOutputTokens.toLocaleString()} output)`}
-                    className="font-mono text-sm text-gray-500"
+                {totalTokens > 0 && (
+                  <AICostTooltip
+                    cost={runCost}
+                    details={`${totalTokens.toLocaleString()} tokens (${totalInputTokens.toLocaleString()} input + ${totalOutputTokens.toLocaleString()} output)`}
                   >
-                    (${runCost.toFixed(2)})
-                  </span>
+                    <span className="cursor-help font-mono text-sm text-gray-500">
+                      ({formatAICost(runCost)})
+                    </span>
+                  </AICostTooltip>
                 )}
               </div>
             </div>
@@ -466,9 +470,6 @@ export default function PlaybookRunDetailView({
         </div>
       </div>
 
-      {/* Tooltips */}
-      <Tooltip id="action-cost-tooltip" />
-
       {/* Modals */}
       <ViewPlaybookSpecModal
         data={data}

src/components/Playbooks/Runs/Actions/PlaybooksActionsResults.stories.tsx

@@ -74,3 +74,53 @@ UndefinedResult.args = {
     result: undefined
   }
 };
+
+export const AIWithSmallCost = Template.bind({});
+AIWithSmallCost.args = {
+  action: {
+    name: "Analyze incident",
+    status: "completed",
+    id: "1",
+    start_time: "2026-07-08T12:53:40Z",
+    end_time: "2026-07-08T12:53:49Z",
+    playbook_run_id: "1",
+    type: "ai",
+    result: {
+      json: JSON.stringify(
+        {
+          headline:
+            "flanksource-ui/Release Unhealthy: Repository Access Blocked",
+          summary:
+            "The workflow is unhealthy because repository access is blocked.",
+          recommended_fix:
+            "Verify repository access and GitHub token permissions."
+        },
+        null,
+        2
+      ),
+      generationInfo: [
+        {
+          cost: 0.0018809,
+          model: "gemini-2.5-flash",
+          inputTokens: 778,
+          outputTokens: 131,
+          reasoningTokens: 528
+        },
+        {
+          cost: 0.0017708999999999997,
+          model: "gemini-2.5-flash",
+          inputTokens: 4053,
+          outputTokens: 10,
+          reasoningTokens: 212
+        }
+      ]
+    }
+  }
+};
+AIWithSmallCost.decorators = [
+  (Story) => (
+    <div className="h-[500px] w-[780px] pt-16">
+      <Story />
+    </div>
+  )
+];

src/components/Playbooks/Runs/Actions/PlaybooksActionsResults.tsx

@@ -2,7 +2,7 @@ import Convert from "ansi-to-html";
 import linkifyHtml from "linkify-html";
 import { Opts } from "linkifyjs";
 import clsx from "clsx";
-import { useMemo, useState, useRef } from "react";
+import { useMemo, useState, useRef, type ReactNode } from "react";
 import { useQuery } from "@tanstack/react-query";
 import {
   PlaybookArtifact,
@@ -25,6 +25,8 @@ import { darkTheme } from "@flanksource-ui/ui/Code/JSONViewerTheme";
 import { JSONViewer } from "@flanksource-ui/ui/Code/JSONViewer";
 import path from "path";
 import { LogsTable } from "@flanksource-ui/components/Logs/Table/LogsTable";
+import { formatAICost } from "./cost";
+import { AICostTooltip } from "./AICostTooltip";
 
 const options = {
   className: "text-blue-500 hover:underline pointer",
@@ -125,6 +127,7 @@ type DisplayContentType = string;
 
 type PlaybookActionTab = {
   label: string;
+  labelContent?: ReactNode;
   type?: "artifact" | "error";
   contentSize?: string;
   content: any;
@@ -163,13 +166,14 @@ export default function PlaybooksRunActionsResults({
   action,
   className = "whitespace-pre-wrap break-all"
 }: Props) {
-  const { result, error, artifacts } = action;
+  const { result: actionResult, error, artifacts } = action;
   const [activeTab, setActiveTab] = useState<string | null>(null);
   const activeTabContentRef = useRef<HTMLDivElement>(null);
 
   const availableTabs = useMemo(() => {
     const tabs: PlaybookActionTab[] = [];
-    if (result) {
+    if (actionResult) {
+      const result = { ...actionResult };
       // AI action can have a cost
       let actionCost = 0;
       if (action.type === "ai" && result["generationInfo"]) {
@@ -233,7 +237,13 @@ export default function PlaybooksRunActionsResults({
           };
 
           if (actionCost) {
-            tab.label = `${tab.label} ($${actionCost.toFixed(2)})`;
+            const label = `${tab.label} (${formatAICost(actionCost)})`;
+            tab.label = label;
+            tab.labelContent = (
+              <AICostTooltip cost={actionCost}>
+                <span className="cursor-help">{label}</span>
+              </AICostTooltip>
+            );
           }
 
           // Pre-process the content for certain types
@@ -342,7 +352,7 @@ export default function PlaybooksRunActionsResults({
     });
 
     return tabs;
-  }, [result, error, artifacts, action.type]);
+  }, [actionResult, error, artifacts, action.type]);
 
   useMemo(() => {
     if (availableTabs.length > 0 && !activeTab) {
@@ -364,7 +374,7 @@ export default function PlaybooksRunActionsResults({
         contentClassName="flex-1 overflow-y-auto border border-t-0 border-gray-600 bg-black p-4"
       >
         {availableTabs.map((tab) => {
-          let label = tab.label;
+          let label: ReactNode = tab.labelContent ?? tab.label;
           if (tab.contentSize) {
             label = `${label} (${tab.contentSize})`;
           }

src/components/Playbooks/Runs/Actions/__tests__/PlaybooksActionsResults.unit.test.tsx

@@ -341,4 +341,35 @@ describe("PlaybooksRunActionsResults", () => {
     expect(screen.queryByText("ContentType")).not.toBeInTheDocument();
     expect(screen.queryByText("text/markdown")).not.toBeInTheDocument();
   });
+
+  it("shows small AI action costs and exact cost on hover", async () => {
+    const action = {
+      id: "1",
+      name: "ai action",
+      status: "completed" as const,
+      playbook_run_id: "1",
+      start_time: "2024-01-01",
+      type: "ai" as const,
+      result: {
+        json: '{ "answer": "ok" }',
+        generationInfo: [
+          {
+            cost: 0.0018809
+          },
+          {
+            cost: 0.0017708999999999997
+          }
+        ]
+      }
+    };
+
+    render(<PlaybooksRunActionsResults action={action} />);
+
+    fireEvent.pointerMove(screen.getByText("AI ($0.0037)"), {
+      pointerType: "mouse"
+    });
+
+    expect(screen.getByText("AI ($0.0037)")).toBeInTheDocument();
+    expect(await screen.findAllByText("$0.0036518")).toHaveLength(2);
+  });
 });