feat(sessions): gate per-task cost behind posthog-code-task-cost flag

Wrap the cost readout (indicator chip suffix and breakdown popover row)
in a feature flag so it can roll out gradually. On in local dev via the
import.meta.env.DEV fallback, matching the other UI flags.

Generated-By: PostHog Code
Task-Id: f6d673c3-965e-4598-a4bd-663f2651a5a5

Author: gantoine

packages/shared/src/flags.ts

@@ -21,3 +21,5 @@ export const GLM_MODEL_FLAG = "posthog-code-glm-model";
 export const SPOKEN_NARRATION_FLAG = "posthog-code-spoken-narration";
 // Gates importing and relaying local MCP servers into cloud task runs.
 export const LOCAL_MCP_IMPORT_FLAG = "posthog-code-local-mcp-import";
+/** Per-task estimated cost readout in the context usage indicator. */
+export const TASK_COST_FLAG = "posthog-code-task-cost";

packages/ui/src/features/sessions/components/ContextBreakdownPopover.tsx

@@ -9,10 +9,12 @@ import { Flex, Text } from "@radix-ui/themes";
 
 interface ContextBreakdownPopoverProps {
   usage: ContextUsage;
+  showCost?: boolean;
 }
 
 export function ContextBreakdownPopover({
   usage,
+  showCost = false,
 }: ContextBreakdownPopoverProps) {
   const { used, size, percentage, cost, breakdown } = usage;
   const fillColor = getOverallUsageColor(percentage);
@@ -73,7 +75,7 @@ export function ContextBreakdownPopover({
         </Text>
       )}
 
-      {cost && (
+      {showCost && cost && (
         <Flex
           align="center"
           justify="between"

packages/ui/src/features/sessions/components/ContextUsageIndicator.tsx

@@ -1,3 +1,5 @@
+import { TASK_COST_FLAG } from "@posthog/shared";
+import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
 import {
   formatCostUsd,
   formatTokensCompact,
@@ -17,6 +19,8 @@ interface ContextUsageIndicatorProps {
 }
 
 export function ContextUsageIndicator({ usage }: ContextUsageIndicatorProps) {
+  const costEnabled = useFeatureFlag(TASK_COST_FLAG) || import.meta.env.DEV;
+
   if (!usage) return null;
 
   const { used, size, percentage, cost } = usage;
@@ -25,10 +29,11 @@ export function ContextUsageIndicator({ usage }: ContextUsageIndicatorProps) {
   const hasSize = size > 0;
   const strokeDashoffset = CIRCUMFERENCE - (percentage / 100) * CIRCUMFERENCE;
   const color = getOverallUsageColor(percentage);
+  const showCost = costEnabled && cost !== null;
   const tokenLabel = hasSize
     ? `${formatTokensCompact(used)}/${formatTokensCompact(size)} · ${percentage}%`
     : formatTokensCompact(used);
-  const label = cost
+  const label = showCost
     ? `${tokenLabel} · ${formatCostUsd(cost.amount)}`
     : tokenLabel;
 
@@ -79,7 +84,7 @@ export function ContextUsageIndicator({ usage }: ContextUsageIndicatorProps) {
         </button>
       </Popover.Trigger>
       <Popover.Content size="2" side="top" align="end" sideOffset={6}>
-        <ContextBreakdownPopover usage={usage} />
+        <ContextBreakdownPopover usage={usage} showCost={showCost} />
       </Popover.Content>
     </Popover.Root>
   );