PolicyEngine · anth-volk · Dec 19, 2025 · Dec 22, 2025 · Dec 22, 2025 · Dec 22, 2025
diff --git a/app/public/assets/posts/encode-policy-multi-agent-ai/assets/index-BJx1p784.css b/app/public/assets/posts/encode-policy-multi-agent-ai/assets/index-BJx1p784.css
diff --git a/app/public/assets/posts/encode-policy-multi-agent-ai/assets/index-DC8RyDPP.js b/app/public/assets/posts/encode-policy-multi-agent-ai/assets/index-DC8RyDPP.js
diff --git a/app/public/assets/posts/encode-policy-multi-agent-ai/index.html b/app/public/assets/posts/encode-policy-multi-agent-ai/index.html
@@ -5,11 +5,14 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Automating Tax and Benefit Policy Modeling with Multi-Agent AI</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap"
+      rel="stylesheet"
+    />
     <script type="module" crossorigin src="./assets/index-DC8RyDPP.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-BJx1p784.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-BJx1p784.css" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/app/src/CalculatorRouter.tsx b/app/src/CalculatorRouter.tsx
@@ -6,14 +6,19 @@ import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
 import PathwayLayout from './components/PathwayLayout';
 import StandardLayout from './components/StandardLayout';
 import DashboardPage from './pages/Dashboard.page';
+import PlaygroundPage from './pages/playground/PlaygroundPage';
 import PoliciesPage from './pages/Policies.page';
+import PolicyEditingConceptPage from './pages/policyEditingConcepts/PolicyEditingConceptPage';
+import PolicyEditingConceptsPage from './pages/policyEditingConcepts/PolicyEditingConcepts.page';
 import PopulationsPage from './pages/Populations.page';
+import ModifyReportPage from './pages/reportBuilder/ModifyReportPage';
+// Old monolithic file preserved but not used - see ./pages/ReportBuilder.page.tsx
+import ReportBuilderPage from './pages/reportBuilder/ReportBuilderPage';
 import ReportOutputPage from './pages/ReportOutput.page';
 import ReportsPage from './pages/Reports.page';
 import SimulationsPage from './pages/Simulations.page';
 import PolicyPathwayWrapper from './pathways/policy/PolicyPathwayWrapper';
 import PopulationPathwayWrapper from './pathways/population/PopulationPathwayWrapper';
-import ReportPathwayWrapper from './pathways/report/ReportPathwayWrapper';
 import SimulationPathwayWrapper from './pathways/simulation/SimulationPathwayWrapper';
 import { CountryGuard } from './routing/guards/CountryGuard';
 import { MetadataGuard } from './routing/guards/MetadataGuard';
@@ -68,10 +73,6 @@ const router = createBrowserRouter(
             {
               element: <PathwayLayout />,
               children: [
-                {
-                  path: 'reports/create',
-                  element: <ReportPathwayWrapper />,
-                },
                 {
                   path: 'simulations/create',
                   element: <SimulationPathwayWrapper />,
@@ -119,6 +120,26 @@ const router = createBrowserRouter(
                   path: 'policies',
                   element: <PoliciesPage />,
                 },
+                {
+                  path: 'reports/create',
+                  element: <ReportBuilderPage />,
+                },
+                {
+                  path: 'reports/create/:userReportId',
+                  element: <ModifyReportPage />,
+                },
+                {
+                  path: 'policy-editing-concepts',
+                  element: <PolicyEditingConceptsPage />,
+                },
+                {
+                  path: 'policy-editing-concepts/:conceptId',
+                  element: <PolicyEditingConceptPage />,
+                },
+                {
+                  path: 'playground',
+                  element: <PlaygroundPage />,
+                },
                 {
                   path: 'account',
                   element: <div>Account settings page</div>,

diff --git a/app/src/api/societyWideCalculation.ts b/app/src/api/societyWideCalculation.ts
@@ -43,12 +43,18 @@ export async function fetchSocietyWideCalculation(
   });
 
   if (!response.ok) {
+    let body = '';
+    try {
+      body = await response.text();
+    } catch {
+      // ignore
+    }
     console.error(
-      '[fetchSocietyWideCalculation] Failed with status:',
-      response.status,
-      response.statusText
+      `[fetchSocietyWideCalculation] ${response.status} ${response.statusText}`,
+      url,
+      body
     );
-    throw new Error(`Society-wide calculation failed: ${response.statusText}`);
+    throw new Error(`Society-wide calculation failed (${response.status}): ${body || response.statusText}`);
   }
 
   const data = await response.json();

diff --git a/app/src/api/usageTracking.ts b/app/src/api/usageTracking.ts
@@ -0,0 +1,103 @@
+/**
+ * Usage Tracking Store
+ *
+ * A lightweight system for tracking "last used" timestamps for any ingredient
+ * type (policies, households, geographies, etc.).
+ *
+ * This is separate from association data - it only tracks when items
+ * were last accessed, not the items themselves.
+ *
+ * Usage:
+ *   import { policyUsageStore } from '@/api/usageTracking';
+ *
+ *   // Record that a policy was used
+ *   policyUsageStore.recordUsage(policyId);
+ *
+ *   // Get 5 most recently used policy IDs
+ *   const recentIds = policyUsageStore.getRecentIds(5);
+ */
+
+/** ISO timestamp string */
+export type UsageData = Record<string, string>;
+
+/**
+ * Generic store for tracking usage of items by ID.
+ * Each ingredient type gets its own store instance with a unique storage key.
+ */
+export class UsageTrackingStore {
+  constructor(private readonly storageKey: string) {}
+
+  /**
+   * Record that an item was used/accessed.
+   * Updates the lastUsedAt timestamp.
+   */
+  recordUsage(id: string): string {
+    const usage = this.getAll();
+    const timestamp = new Date().toISOString();
+    usage[id] = timestamp;
+    localStorage.setItem(this.storageKey, JSON.stringify(usage));
+    return timestamp;
+  }
+
+  /**
+   * Get all usage records (id -> lastUsedAt timestamp).
+   */
+  getAll(): UsageData {
+    try {
+      const stored = localStorage.getItem(this.storageKey);
+      return stored ? JSON.parse(stored) : {};
+    } catch {
+      console.error(`[UsageTrackingStore] Failed to parse ${this.storageKey}`);
+      return {};
+    }
+  }
+
+  /**
+   * Get IDs sorted by most recently used.
+   * @param limit Maximum number of IDs to return (default 10)
+   */
+  getRecentIds(limit = 10): string[] {
+    const usage = this.getAll();
+    return Object.entries(usage)
+      .sort(([, a], [, b]) => b.localeCompare(a))
+      .slice(0, limit)
+      .map(([id]) => id);
+  }
+
+  /**
+   * Get the last used timestamp for a specific ID.
+   */
+  getLastUsed(id: string): string | null {
+    return this.getAll()[id] || null;
+  }
+
+  /**
+   * Check if an item has any usage recorded.
+   */
+  hasUsage(id: string): boolean {
+    return !!this.getAll()[id];
+  }
+
+  /**
+   * Remove usage record for a specific ID.
+   */
+  removeUsage(id: string): void {
+    const usage = this.getAll();
+    delete usage[id];
+    localStorage.setItem(this.storageKey, JSON.stringify(usage));
+  }
+
+  /**
+   * Clear all usage records for this store.
+   */
+  clear(): void {
+    localStorage.removeItem(this.storageKey);
+  }
+}
+
+// Pre-configured stores for each ingredient type
+export const policyUsageStore = new UsageTrackingStore('policy-usage');
+export const householdUsageStore = new UsageTrackingStore('household-usage');
+export const geographyUsageStore = new UsageTrackingStore('geography-usage');
+export const simulationUsageStore = new UsageTrackingStore('simulation-usage');
+export const reportUsageStore = new UsageTrackingStore('report-usage');
diff --git a/app/src/components/IngredientReadView.tsx b/app/src/components/IngredientReadView.tsx
@@ -1,5 +1,5 @@
 import { IconPlus } from '@tabler/icons-react';
-import { Box, Button, Checkbox, Flex, Loader, Paper, Table, Text, Title } from '@mantine/core';
+import { Box, Button, Flex, Loader, Paper, Table, Text, Title } from '@mantine/core';
 import { colors, spacing, typography } from '@/designTokens';
 import { ColumnConfig, ColumnRenderer, IngredientRecord } from './columns';
 import EmptyState from './common/EmptyState';
@@ -19,9 +19,6 @@ interface IngredientReadViewProps {
   searchValue?: string;
   onSearchChange?: (value: string) => void;
   onMoreFilters?: () => void;
-  enableSelection?: boolean;
-  isSelected?: (recordId: string) => boolean;
-  onSelectionChange?: (recordId: string, selected: boolean) => void;
 }
 
 export default function IngredientReadView({
@@ -38,9 +35,6 @@ export default function IngredientReadView({
   searchValue: _searchValue = '',
   onSearchChange: _onSearchChange,
   onMoreFilters: _onMoreFilters,
-  enableSelection = true,
-  isSelected = () => false,
-  onSelectionChange,
 }: IngredientReadViewProps) {
   return (
     <Box>
@@ -115,16 +109,6 @@ export default function IngredientReadView({
               <Table>
                 <Table.Thead style={{ backgroundColor: colors.gray[50] }}>
                   <Table.Tr>
-                    {enableSelection && (
-                      <Table.Th
-                        style={{
-                          width: '48px',
-                          padding: `${spacing.md} ${spacing.lg}`,
-                        }}
-                      >
-                        {/* Optional: Add "select all" checkbox here in the future */}
-                      </Table.Th>
-                    )}
                     {columns.map((column) => (
                       <Table.Th
                         key={column.key}
@@ -143,49 +127,18 @@ export default function IngredientReadView({
                   </Table.Tr>
                 </Table.Thead>
                 <Table.Tbody>
-                  {data.map((record) => {
-                    const selected = isSelected(record.id);
-                    return (
-                      <Table.Tr
-                        key={record.id}
-                        style={{
-                          backgroundColor: selected ? colors.blue[50] : 'transparent',
-                          borderLeft: selected
-                            ? `3px solid ${colors.primary[500]}`
-                            : '3px solid transparent',
-                          cursor: enableSelection ? 'pointer' : 'default',
-                        }}
-                        onClick={() => {
-                          if (enableSelection && onSelectionChange) {
-                            onSelectionChange(record.id, !selected);
-                          }
-                        }}
-                      >
-                        {enableSelection && (
-                          <Table.Td style={{ padding: `${spacing.md} ${spacing.lg}` }}>
-                            <Checkbox
-                              checked={selected}
-                              onChange={(event) => {
-                                event.stopPropagation();
-                                if (onSelectionChange) {
-                                  onSelectionChange(record.id, event.currentTarget.checked);
-                                }
-                              }}
-                              size="sm"
-                            />
-                          </Table.Td>
-                        )}
-                        {columns.map((column) => (
-                          <Table.Td
-                            key={column.key}
-                            style={{ padding: `${spacing.md} ${spacing.lg}` }}
-                          >
-                            <ColumnRenderer config={column} record={record} />
-                          </Table.Td>
-                        ))}
-                      </Table.Tr>
-                    );
-                  })}
+                  {data.map((record) => (
+                    <Table.Tr key={record.id}>
+                      {columns.map((column) => (
+                        <Table.Td
+                          key={column.key}
+                          style={{ padding: `${spacing.md} ${spacing.lg}` }}
+                        >
+                          <ColumnRenderer config={column} record={record} />
+                        </Table.Td>
+                      ))}
+                    </Table.Tr>
+                  ))}
                 </Table.Tbody>
               </Table>
             )}

diff --git a/app/src/components/Sidebar.tsx b/app/src/components/Sidebar.tsx
@@ -8,7 +8,7 @@ import {
   IconMail,
   IconPlus,
   IconScale,
-  IconSettings2,
+  IconTestPipe,
   IconUsers,
 } from '@tabler/icons-react';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -35,6 +35,7 @@ export default function Sidebar({ isOpen = true }: SidebarProps) {
     { label: 'Simulations', icon: IconGitBranch, path: `/${countryId}/simulations` },
     { label: 'Policies', icon: IconScale, path: `/${countryId}/policies` },
     { label: 'Households', icon: IconUsers, path: `/${countryId}/households` },
+    { label: 'Playground', icon: IconTestPipe, path: `/${countryId}/playground` },
   ];
 
   const resourceItems = [
@@ -74,12 +75,6 @@ export default function Sidebar({ isOpen = true }: SidebarProps) {
       path: 'mailto:hello@policyengine.org',
       external: true,
     },
-    {
-      label: 'Account settings',
-      icon: IconSettings2,
-      path: `/${countryId}/account`,
-      disabled: true,
-    },
   ];
 
   if (!isOpen) {

diff --git a/app/src/components/columns/ActionsColumn.tsx b/app/src/components/columns/ActionsColumn.tsx
@@ -0,0 +1,27 @@
+import { ActionIcon, Box, Tooltip } from '@mantine/core';
+import { spacing } from '@/designTokens';
+import { ActionsColumnConfig, IngredientRecord } from './types';
+
+interface ActionsColumnProps {
+  config: ActionsColumnConfig;
+  record: IngredientRecord;
+}
+
+export function ActionsColumn({ config, record }: ActionsColumnProps) {
+  return (
+    <Box style={{ display: 'flex', gap: spacing.xs, justifyContent: 'flex-end' }}>
+      {config.actions.map((action) => (
+        <Tooltip key={action.action} label={action.tooltip} position="bottom" withArrow>
+          <ActionIcon
+            variant="light"
+            color={action.color || 'gray'}
+            size="lg"
+            onClick={() => config.onAction(action.action, record.id)}
+          >
+            {action.icon}
+          </ActionIcon>
+        </Tooltip>
+      ))}
+    </Box>
+  );
+}