From 8dde4262ec73f5c866e5b6a2465b0a1709c0e60f Mon Sep 17 00:00:00 2001
From: Reece Browne <74901996+reecebrowne@users.noreply.github.com>
Date: Wed, 10 Jun 2026 15:57:08 +0100
Subject: [PATCH] feat(policies): backend-driven policy enforcement (frontend)
(#6598)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## Summary
Adds the **Policies** feature (proprietary, behind the
`POLICIES_ENABLED` flag): backend-driven enforcement that runs a fixed
tool pipeline on documents, docked in the right tool sidebar alongside
Tools.
## Highlights
- **Policy catalog** — 5 categories; **Security** is wired (redact PII +
sanitize), the others are marked "Coming soon".
- **Backend as source of truth** — policies persist via the Policies
engine (`/api/v1/policies`), one policy per category, with a local cache
+ offline fallback.
- **Auto-run** — enabled policies run on every uploaded file: dispatch →
poll → import outputs into the workspace.
- **Security redact config** — PII preset dropdown + custom word/regex
entry + advanced options; tool params map to the backend endpoint
fields.
- **Activity feed** with retry on failures; **file badges** showing
which policies ran on a file (sidebar + files page), tinted to the
policy colour.
- Reuses the **Watched Folders** engine for each policy's backing
folder; policy-owned folders are filtered out of the Watched Folders UI.
## Notes
- Gated by `POLICIES_ENABLED` (true in proprietary, false in core) —
unreachable in the open-source build.
- Frontend-only diff; depends on the backend Policies engine and the
merged Watched Folders feature.
---
frontend/.storybook/main.ts | 22 +-
.../public/locales/en-GB/translation.toml | 3 +
.../core/components/filesPage/FileGrid.tsx | 29 +
.../core/components/filesPage/FilesPage.css | 18 +
.../components/policies/PoliciesSidebar.tsx | 38 ++
.../policies/PolicyAutoRunController.tsx | 11 +
.../core/components/shared/FileSidebar.tsx | 5 +
.../components/shared/FileSidebarFileItem.css | 19 +
.../components/shared/FileSidebarFileItem.tsx | 32 +
.../shared/RainbowThemeProvider.tsx | 16 +-
.../core/components/tools/RightSidebar.tsx | 231 ++++---
.../src/core/components/tools/ToolPanel.css | 23 +
.../editor/src/core/constants/featureFlags.ts | 15 +-
.../src/core/hooks/useAllWatchedFolders.ts | 4 +-
.../src/core/hooks/usePolicyFileBadges.ts | 10 +
.../src/core/tests/helpers/api-stubs.ts | 8 +
.../editor/src/core/types/watchedFolders.ts | 3 +
.../components/policies/Policies.css | 438 +++++++++++++
.../components/policies/Policies.stories.tsx | 163 +++++
.../policies/PoliciesSidebar.test.tsx | 152 +++++
.../components/policies/PoliciesSidebar.tsx | 453 +++++++++++++
.../policies/PolicyAutoRunController.tsx | 11 +
.../policies/PolicyDeleteConfirmModal.tsx | 46 ++
.../components/policies/PolicyDetailPanel.tsx | 279 ++++++++
.../components/policies/PolicyFieldRow.tsx | 88 +++
.../components/policies/PolicyPiiField.tsx | 61 ++
.../policies/PolicyRedactConfig.tsx | 128 ++++
.../components/policies/PolicySetupWizard.tsx | 602 ++++++++++++++++++
.../components/policies/PolicyToolConfig.tsx | 96 +++
.../policies/PolicyToolConfigStep.tsx | 114 ++++
.../policies/PolicyWorkflowStep.tsx | 61 ++
.../proprietary/components/policies/README.md | 86 +++
.../policies/policyRunStore.test.ts | 81 +++
.../components/policies/policyRunStore.ts | 155 +++++
.../policies/policySelectionStore.ts | 71 +++
.../components/policies/policyStatus.ts | 27 +
.../components/policies/policyToolChains.ts | 18 +
.../components/policies/policyValues.ts | 16 +
.../components/policies/usePolicyAutoRun.ts | 205 ++++++
.../src/proprietary/constants/featureFlags.ts | 17 +-
.../data/policyDefinitions.test.ts | 23 +
.../proprietary/data/policyDefinitions.tsx | 365 +++++++++++
.../src/proprietary/hooks/usePolicies.test.ts | 155 +++++
.../src/proprietary/hooks/usePolicies.ts | 282 ++++++++
.../src/proprietary/hooks/usePolicyCatalog.ts | 16 +
.../proprietary/hooks/usePolicyFileBadges.ts | 43 ++
.../proprietary/hooks/useWatchedFolders.ts | 3 +-
.../src/proprietary/services/policyApi.ts | 99 +++
.../src/proprietary/services/policyBackend.ts | 95 +++
.../src/proprietary/services/policyCatalog.ts | 43 ++
.../services/policyFolders.test.ts | 85 +++
.../src/proprietary/services/policyFolders.ts | 137 ++++
.../services/policyLiveData.test.ts | 97 +++
.../proprietary/services/policyLiveData.ts | 100 +++
.../services/policyPipeline.test.ts | 157 +++++
.../proprietary/services/policyPipeline.ts | 291 +++++++++
.../services/policyStorage.test.ts | 72 +++
.../src/proprietary/services/policyStorage.ts | 111 ++++
.../editor/src/proprietary/types/policies.ts | 211 ++++++
frontend/editor/vite.config.ts | 9 +
frontend/editor/vitest.config.ts | 21 +
frontend/shared/components/Checkbox.css | 6 +
frontend/shared/components/Checkbox.tsx | 9 +-
frontend/shared/components/ChipFlow.css | 12 +
.../shared/components/ChipFlow.stories.tsx | 25 +
frontend/shared/components/ChipFlow.tsx | 47 ++
frontend/shared/components/DataRow.css | 23 +
.../shared/components/DataRow.stories.tsx | 38 ++
frontend/shared/components/DataRow.tsx | 41 ++
frontend/shared/components/IconBadge.css | 35 +
.../shared/components/IconBadge.stories.tsx | 42 ++
frontend/shared/components/IconBadge.tsx | 40 ++
frontend/shared/components/ListRow.css | 88 +++
.../shared/components/ListRow.stories.tsx | 80 +++
frontend/shared/components/ListRow.tsx | 79 +++
frontend/shared/components/MetricCard.css | 12 +
frontend/shared/components/MetricCard.tsx | 4 +
frontend/shared/components/NavItem.css | 45 ++
frontend/shared/components/NavItem.tsx | 18 +-
frontend/shared/components/PanelHeader.css | 16 +-
frontend/shared/components/PanelHeader.tsx | 15 +-
frontend/shared/components/SectionHeader.css | 33 +
.../components/SectionHeader.stories.tsx | 36 ++
frontend/shared/components/SectionHeader.tsx | 66 ++
frontend/shared/components/Select.css | 19 +
frontend/shared/components/SettingsRow.css | 30 +
.../shared/components/SettingsRow.stories.tsx | 82 +++
frontend/shared/components/SettingsRow.tsx | 39 ++
frontend/shared/components/StepIndicator.css | 27 +
.../components/StepIndicator.stories.tsx | 29 +
frontend/shared/components/StepIndicator.tsx | 43 ++
91 files changed, 7250 insertions(+), 99 deletions(-)
create mode 100644 frontend/editor/src/core/components/policies/PoliciesSidebar.tsx
create mode 100644 frontend/editor/src/core/components/policies/PolicyAutoRunController.tsx
create mode 100644 frontend/editor/src/core/hooks/usePolicyFileBadges.ts
create mode 100644 frontend/editor/src/proprietary/components/policies/Policies.css
create mode 100644 frontend/editor/src/proprietary/components/policies/Policies.stories.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PoliciesSidebar.test.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PoliciesSidebar.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PolicyAutoRunController.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PolicyDeleteConfirmModal.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PolicyDetailPanel.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PolicyFieldRow.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PolicyPiiField.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PolicyRedactConfig.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PolicySetupWizard.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PolicyToolConfig.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PolicyToolConfigStep.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/PolicyWorkflowStep.tsx
create mode 100644 frontend/editor/src/proprietary/components/policies/README.md
create mode 100644 frontend/editor/src/proprietary/components/policies/policyRunStore.test.ts
create mode 100644 frontend/editor/src/proprietary/components/policies/policyRunStore.ts
create mode 100644 frontend/editor/src/proprietary/components/policies/policySelectionStore.ts
create mode 100644 frontend/editor/src/proprietary/components/policies/policyStatus.ts
create mode 100644 frontend/editor/src/proprietary/components/policies/policyToolChains.ts
create mode 100644 frontend/editor/src/proprietary/components/policies/policyValues.ts
create mode 100644 frontend/editor/src/proprietary/components/policies/usePolicyAutoRun.ts
create mode 100644 frontend/editor/src/proprietary/data/policyDefinitions.test.ts
create mode 100644 frontend/editor/src/proprietary/data/policyDefinitions.tsx
create mode 100644 frontend/editor/src/proprietary/hooks/usePolicies.test.ts
create mode 100644 frontend/editor/src/proprietary/hooks/usePolicies.ts
create mode 100644 frontend/editor/src/proprietary/hooks/usePolicyCatalog.ts
create mode 100644 frontend/editor/src/proprietary/hooks/usePolicyFileBadges.ts
create mode 100644 frontend/editor/src/proprietary/services/policyApi.ts
create mode 100644 frontend/editor/src/proprietary/services/policyBackend.ts
create mode 100644 frontend/editor/src/proprietary/services/policyCatalog.ts
create mode 100644 frontend/editor/src/proprietary/services/policyFolders.test.ts
create mode 100644 frontend/editor/src/proprietary/services/policyFolders.ts
create mode 100644 frontend/editor/src/proprietary/services/policyLiveData.test.ts
create mode 100644 frontend/editor/src/proprietary/services/policyLiveData.ts
create mode 100644 frontend/editor/src/proprietary/services/policyPipeline.test.ts
create mode 100644 frontend/editor/src/proprietary/services/policyPipeline.ts
create mode 100644 frontend/editor/src/proprietary/services/policyStorage.test.ts
create mode 100644 frontend/editor/src/proprietary/services/policyStorage.ts
create mode 100644 frontend/editor/src/proprietary/types/policies.ts
create mode 100644 frontend/shared/components/ChipFlow.css
create mode 100644 frontend/shared/components/ChipFlow.stories.tsx
create mode 100644 frontend/shared/components/ChipFlow.tsx
create mode 100644 frontend/shared/components/DataRow.css
create mode 100644 frontend/shared/components/DataRow.stories.tsx
create mode 100644 frontend/shared/components/DataRow.tsx
create mode 100644 frontend/shared/components/IconBadge.css
create mode 100644 frontend/shared/components/IconBadge.stories.tsx
create mode 100644 frontend/shared/components/IconBadge.tsx
create mode 100644 frontend/shared/components/ListRow.css
create mode 100644 frontend/shared/components/ListRow.stories.tsx
create mode 100644 frontend/shared/components/ListRow.tsx
create mode 100644 frontend/shared/components/SectionHeader.css
create mode 100644 frontend/shared/components/SectionHeader.stories.tsx
create mode 100644 frontend/shared/components/SectionHeader.tsx
create mode 100644 frontend/shared/components/SettingsRow.css
create mode 100644 frontend/shared/components/SettingsRow.stories.tsx
create mode 100644 frontend/shared/components/SettingsRow.tsx
create mode 100644 frontend/shared/components/StepIndicator.css
create mode 100644 frontend/shared/components/StepIndicator.stories.tsx
create mode 100644 frontend/shared/components/StepIndicator.tsx
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
index 7a53d8e9c..0797a367a 100644
--- a/frontend/.storybook/main.ts
+++ b/frontend/.storybook/main.ts
@@ -1,12 +1,14 @@
import { resolve } from "node:path";
import type { StorybookConfig } from "@storybook/react-vite";
+import tsconfigPaths from "vite-tsconfig-paths";
/**
* Storybook 9 ships essentials, interactions, and docs as built-ins, so the
* addon list is just the extras we want: theme switching + a11y auditing.
*
- * Story files live next to their components in shared/ and portal/src/.
- * MDX docs pages live in portal/src/docs/.
+ * Story files live next to their components in shared/, portal/src/, and
+ * editor/src/ — the design system is shared by BOTH apps, so both surface
+ * their stories here. MDX docs pages live in portal/src/docs/.
*/
const config: StorybookConfig = {
stories: [
@@ -14,6 +16,7 @@ const config: StorybookConfig = {
"../portal/src/**/*.stories.@(ts|tsx)",
"../shared/**/*.mdx",
"../shared/**/*.stories.@(ts|tsx)",
+ "../editor/src/**/*.stories.@(ts|tsx)",
],
addons: ["@storybook/addon-themes", "@storybook/addon-a11y"],
framework: {
@@ -28,13 +31,26 @@ const config: StorybookConfig = {
staticDirs: ["../portal/public"],
viteFinal: async (config) => {
// Wire @portal/* and @shared/* aliases directly on the Storybook bundler so
- // story imports resolve without needing the portal's vite config.
+ // portal story imports resolve without needing the portal's vite config.
config.resolve = config.resolve ?? {};
config.resolve.alias = {
...(config.resolve.alias ?? {}),
"@portal": resolve(__dirname, "../portal/src"),
"@shared": resolve(__dirname, "../shared"),
};
+ // Editor stories import via @app/* (proprietary→core fallback), @core/* and
+ // @proprietary/*. Resolve them exactly the way the editor's own build does —
+ // through vite-tsconfig-paths against the proprietary vite tsconfig — so the
+ // shared Storybook can host editor components without duplicating the alias
+ // map here.
+ config.plugins = config.plugins ?? [];
+ config.plugins.push(
+ tsconfigPaths({
+ projects: [
+ resolve(__dirname, "../editor/tsconfig.proprietary.vite.json"),
+ ],
+ }),
+ );
return config;
},
};
diff --git a/frontend/editor/public/locales/en-GB/translation.toml b/frontend/editor/public/locales/en-GB/translation.toml
index 388933960..d06fd55e4 100644
--- a/frontend/editor/public/locales/en-GB/translation.toml
+++ b/frontend/editor/public/locales/en-GB/translation.toml
@@ -8193,6 +8193,9 @@ confirm = "Extract"
message = "This ZIP contains {{count}} files. Extract anyway?"
title = "Large ZIP File"
+[policies]
+sidebarTitle = "Policies"
+
[watchedFolders]
alreadyInFolder = "Already in this folder"
deleteConfirmBody = "This will remove the folder and its run history. Files already downloaded are not affected."
diff --git a/frontend/editor/src/core/components/filesPage/FileGrid.tsx b/frontend/editor/src/core/components/filesPage/FileGrid.tsx
index 6249565ff..46644b1b7 100644
--- a/frontend/editor/src/core/components/filesPage/FileGrid.tsx
+++ b/frontend/editor/src/core/components/filesPage/FileGrid.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import { ActionIcon, Button, Checkbox, Menu, Tooltip } from "@mantine/core";
import MoreVertIcon from "@mui/icons-material/MoreVert";
+import ShieldOutlinedIcon from "@mui/icons-material/ShieldOutlined";
import FolderIcon from "@mui/icons-material/Folder";
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
@@ -17,6 +18,7 @@ import CreateNewFolderIcon from "@mui/icons-material/CreateNewFolder";
import { FileId } from "@app/types/file";
import { FolderId, FolderRecord, ROOT_FOLDER_ID } from "@app/types/folder";
import { useFolders } from "@app/contexts/FolderContext";
+import { usePolicyFileBadges } from "@app/hooks/usePolicyFileBadges";
import { StirlingFileStub } from "@app/types/fileContext";
import { formatFileSize, getFileDate } from "@app/utils/fileUtils";
import {
@@ -572,6 +574,31 @@ function FolderCard({
);
}
+/** Shield badges for the policies that have run on a file. */
+function PolicyBadges({ fileId }: { fileId: string }) {
+ const badges = usePolicyFileBadges().get(fileId) ?? [];
+ if (badges.length === 0) return null;
+ return (
+
+ {badges.slice(0, 3).map((policy) => (
+
+
+
+
+
+ ))}
+
+ );
+}
+
interface FileCardProps {
file: StirlingFileStub;
isSelected: boolean;
@@ -731,6 +758,7 @@ function FileCard({
{fileSize}·{fileDate}
+
@@ -1315,6 +1343,7 @@ function FileRow({
)}
+
{isInWorkspace && (
diff --git a/frontend/editor/src/core/components/filesPage/FilesPage.css b/frontend/editor/src/core/components/filesPage/FilesPage.css
index 9b3b7b206..f1e0e3db0 100644
--- a/frontend/editor/src/core/components/filesPage/FilesPage.css
+++ b/frontend/editor/src/core/components/filesPage/FilesPage.css
@@ -484,6 +484,24 @@
gap: 0.4rem;
}
+/* Policy activity badges (a shield per policy that has run on the file). */
+.files-page-policy-badges {
+ display: inline-flex;
+ align-items: center;
+ gap: 3px;
+ flex-shrink: 0;
+}
+.files-page-policy-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 15px;
+ height: 15px;
+ border-radius: 4px;
+ /* `color` set inline to the policy accent; tint follows it. */
+ background: color-mix(in srgb, currentColor 16%, transparent);
+}
+
/* Parent-folder breadcrumb shown on cards/rows during recursive search so
the user can tell which folder each hit lives in without navigating. */
.files-page-card-path {
diff --git a/frontend/editor/src/core/components/policies/PoliciesSidebar.tsx b/frontend/editor/src/core/components/policies/PoliciesSidebar.tsx
new file mode 100644
index 000000000..d787c6435
--- /dev/null
+++ b/frontend/editor/src/core/components/policies/PoliciesSidebar.tsx
@@ -0,0 +1,38 @@
+/**
+ * Core stubs for the right-rail Policies UI.
+ *
+ * The real implementations live in {@code proprietary/components/policies/PoliciesSidebar.tsx}
+ * and shadow these stubs via the {@code @app/*} alias cascade when the proprietary
+ * build is active. Core builds render nothing, so the right rail shows only the
+ * tool list unchanged.
+ */
+
+import type { ReactNode } from "react";
+
+/** Whether the right rail should host the Policies section. False in core. */
+export function usePoliciesEnabled(): boolean {
+ return false;
+}
+
+/**
+ * Whether a policy is open (its detail should take over the rail). Always false
+ * in core; proprietary bridges to the policy-selection store.
+ */
+export function usePolicyDetailActive(): boolean {
+ return false;
+}
+
+/** Collapsible policy list rendered above the Tools section. Null in core. */
+export function PoliciesSection(_props: { leadingControl?: ReactNode } = {}) {
+ return null;
+}
+
+/** Open-policy detail/wizard/settings that replaces the tool area. Null in core. */
+export function PolicyDetailTakeover() {
+ return null;
+}
+
+/** Collapsed-rail policy icons. Null in core; proprietary renders the rail. */
+export function PoliciesCollapsedButton(_props: { onExpand: () => void }) {
+ return null;
+}
diff --git a/frontend/editor/src/core/components/policies/PolicyAutoRunController.tsx b/frontend/editor/src/core/components/policies/PolicyAutoRunController.tsx
new file mode 100644
index 000000000..b34fadc7a
--- /dev/null
+++ b/frontend/editor/src/core/components/policies/PolicyAutoRunController.tsx
@@ -0,0 +1,11 @@
+/**
+ * Core stub for the policy auto-run controller.
+ *
+ * The real implementation lives in
+ * {@code proprietary/components/policies/PolicyAutoRunController.tsx} and shadows
+ * this stub via the {@code @app/*} alias cascade in the proprietary build. Core
+ * builds have no Policies feature, so this renders nothing and runs no policies.
+ */
+export function PolicyAutoRunController() {
+ return null;
+}
diff --git a/frontend/editor/src/core/components/shared/FileSidebar.tsx b/frontend/editor/src/core/components/shared/FileSidebar.tsx
index fb02ebf09..ed4e6e75d 100644
--- a/frontend/editor/src/core/components/shared/FileSidebar.tsx
+++ b/frontend/editor/src/core/components/shared/FileSidebar.tsx
@@ -42,6 +42,7 @@ import type { FileId } from "@app/types/file";
import { FileItem } from "@app/components/shared/FileSidebarFileItem";
import { useFolderMembership } from "@app/hooks/useFolderMembership";
import { useAllWatchedFolders } from "@app/hooks/useAllWatchedFolders";
+import { usePolicyFileBadges } from "@app/hooks/usePolicyFileBadges";
import {
setWatchedFolderDraggedFileIds,
clearWatchedFolderDraggedFileIds,
@@ -131,6 +132,7 @@ const FileSidebar = forwardRef(
// the workbench). The same map drives the per-file membership dots.
const folderMembership = useFolderMembership();
const allFolders = useAllWatchedFolders();
+ const policyFileBadges = usePolicyFileBadges();
const folderById = useMemo(
() => new Map(allFolders.map((f) => [f.id, f])),
[allFolders],
@@ -892,6 +894,9 @@ const FileSidebar = forwardRef(
onDragStart={handleWatchedFolderDragStart}
folders={memberFolders}
onFolderClick={openWatchedFolder}
+ policies={
+ policyFileBadges.get(stub.id as string) ?? []
+ }
/>
);
})}
diff --git a/frontend/editor/src/core/components/shared/FileSidebarFileItem.css b/frontend/editor/src/core/components/shared/FileSidebarFileItem.css
index 3529f0165..81ca24ae0 100644
--- a/frontend/editor/src/core/components/shared/FileSidebarFileItem.css
+++ b/frontend/editor/src/core/components/shared/FileSidebarFileItem.css
@@ -134,6 +134,25 @@
text-overflow: ellipsis;
}
+/* ---- Policy activity badges (a shield per policy that has run on the file) ---- */
+.file-sidebar-policy-badges {
+ display: inline-flex;
+ align-items: center;
+ gap: 3px;
+ flex-shrink: 0;
+}
+.file-sidebar-policy-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 15px;
+ height: 15px;
+ border-radius: 4px;
+ /* `color` is set inline to the policy's accent; the tint follows it. */
+ color: var(--text-secondary);
+ background: color-mix(in srgb, currentColor 16%, transparent);
+}
+
/* ---- Folder membership tags ---- */
.file-sidebar-folder-tags {
display: flex;
diff --git a/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx b/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx
index c03930864..1b2f566f1 100644
--- a/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx
+++ b/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx
@@ -4,6 +4,7 @@ import { Tooltip } from "@mantine/core";
import { useTranslation } from "react-i18next";
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
+import ShieldOutlinedIcon from "@mui/icons-material/ShieldOutlined";
import type { FileId } from "@app/types/file";
import { FileDocIcon } from "@app/components/shared/FileDocIcon";
import { getFileDocVariant } from "@app/components/shared/filePreview/getFileTypeIcon";
@@ -125,6 +126,14 @@ export interface FileItemFolderRef {
accentColor: string;
}
+/** A policy that has run on this file, used for the activity badges. */
+export interface FileItemPolicyRef {
+ id: string;
+ name: string;
+ /** CSS colour for the badge (matches the policy's accent). */
+ accentColor: string;
+}
+
export interface FileItemProps {
fileId: FileId;
name: string;
@@ -143,9 +152,12 @@ export interface FileItemProps {
folders?: FileItemFolderRef[];
/** Clicking a membership dot opens that folder. */
onFolderClick?: (folderId: string) => void;
+ /** Policies that have run on this file — rendered as small shield badges. */
+ policies?: FileItemPolicyRef[];
}
const MAX_VISIBLE_FOLDER_TAGS = 2;
+const MAX_VISIBLE_POLICY_BADGES = 3;
export function FileItem({
fileId,
@@ -162,6 +174,7 @@ export function FileItem({
onDragStart,
folders = [],
onFolderClick,
+ policies = [],
}: FileItemProps) {
const { t } = useTranslation();
const ext = getFileExtension(name);
@@ -237,6 +250,25 @@ export function FileItem({
{dateLabel && typeLabel ? " · " : ""}
{typeLabel}
+ {policies.length > 0 && (
+
+ {policies.slice(0, MAX_VISIBLE_POLICY_BADGES).map((policy) => (
+
+
+
+
+
+ ))}
+
+ )}
{folders.length > 0 && (
diff --git a/frontend/editor/src/core/components/shared/RainbowThemeProvider.tsx b/frontend/editor/src/core/components/shared/RainbowThemeProvider.tsx
index 25ddffaa7..0e6ba64a2 100644
--- a/frontend/editor/src/core/components/shared/RainbowThemeProvider.tsx
+++ b/frontend/editor/src/core/components/shared/RainbowThemeProvider.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, ReactNode } from "react";
+import { createContext, useContext, useEffect, ReactNode } from "react";
import { MantineProvider } from "@mantine/core";
import { useRainbowTheme } from "@app/hooks/useRainbowTheme";
import { mantineTheme } from "@app/theme/mantineTheme";
@@ -7,6 +7,10 @@ import { ToastProvider } from "@app/components/toast";
import ToastRenderer from "@app/components/toast/ToastRenderer";
import { ToastPortalBinder } from "@app/components/toast";
import type { ThemeMode } from "@app/constants/theme";
+// SUI shared design-system tokens (used by @shared/components). Additive — its
+// var names don't clash with the editor's own theme.css. The effect below
+// bridges Mantine's color scheme to the `data-theme` attribute SUI keys on.
+import "@shared/tokens/tokens.css";
interface RainbowThemeContextType {
themeMode: ThemeMode;
@@ -40,6 +44,16 @@ export function RainbowThemeProvider({ children }: RainbowThemeProviderProps) {
const mantineColorScheme =
rainbowTheme.themeMode === "rainbow" ? "dark" : rainbowTheme.themeMode;
+ // Bridge the resolved scheme to the `data-theme` attribute SUI's tokens.css
+ // keys its dark palette on (the editor otherwise only sets Mantine's
+ // data-mantine-color-scheme), so @shared/components theme correctly.
+ useEffect(() => {
+ document.documentElement.setAttribute(
+ "data-theme",
+ mantineColorScheme === "dark" ? "dark" : "light",
+ );
+ }, [mantineColorScheme]);
+
return (
{
+ withViewTransition(() => {
+ if (readerMode) setReaderMode(false);
+ setLeftPanelView("toolPicker");
+ if (!sidebarsVisible) setSidebarsVisible(true);
+ setAllToolsView(false);
+ setSearchQuery("");
+ });
+ };
+
// The header shows [back] [search] when we have somewhere to go back to —
// i.e. the user is in a specific tool, or already in the all-tools/search view.
const inToolView = leftPanelView !== "toolPicker";
// Show X (close) button only when there's somewhere to go back to.
const showCloseButton = inToolView || allToolsView;
- // Show search input whenever there's a close button, or when agents are off and
- // we're in the default tool-picker view (search filters the full list inline).
+ // Policies sit above the tool list in the default tool-picker view.
+ const showPolicies =
+ policiesEnabled && !allToolsView && leftPanelView === "toolPicker";
+ // When Policies are shown, the search moves OUT of the header to sit between
+ // the Policies and Tools sections (separating them); otherwise it stays in the
+ // header. Show the header search when there's a close button, or when agents
+ // are off in the default tool-picker view (inline filtering).
+ const showInlineSearch = showPolicies && !showCloseButton;
const showHeaderSearch =
- showCloseButton || (!agentsEnabled && leftPanelView === "toolPicker");
+ !showInlineSearch &&
+ (showCloseButton || (!agentsEnabled && leftPanelView === "toolPicker"));
const handleHeaderBack = () => {
if (inToolView) {
@@ -201,11 +231,21 @@ export default function RightSidebar() {
const showAgents =
agentsEnabled && !allToolsView && leftPanelView === "toolPicker";
+ // The detail takeover replaces the tool list ONLY in the same default view —
+ // never over an open tool or the all-tools view (which must keep priority).
+ // A lingering selection is harmless: it stays hidden behind a tool and the
+ // list/takeover reappears on return to the picker (as in the prototype).
+ const policyDetailActive = rawPolicyDetailActive && showPolicies;
+
+ // The rail widens when a policy detail takes it over — the tool list is fine
+ // at 18.5rem, but the policy detail/wizard/settings need more breathing room.
+ const expandedWidth = policyDetailActive ? "25rem" : "18.5rem";
+
const computedWidth = () => {
if (isMobile) return "100%";
if (isChatOpen) return `${chatWidthPx}px`;
if (!isPanelVisible) return "3.5rem";
- return "18.5rem";
+ return expandedWidth;
};
// Collapsed rail: show favourites + recommended tools as icons.
@@ -248,6 +288,8 @@ export default function RightSidebar() {
...(isChatDragging ? { transition: "none" } : {}),
}}
>
+ {/* Headless: enforces enabled policies on every uploaded file. */}
+ {policiesEnabled && }
{!fullscreenExpanded && isChatOpen && (
@@ -288,6 +330,7 @@ export default function RightSidebar() {
)}
diff --git a/frontend/editor/src/core/components/tools/ToolPanel.css b/frontend/editor/src/core/components/tools/ToolPanel.css
index 592c83771..103a24ad9 100644
--- a/frontend/editor/src/core/components/tools/ToolPanel.css
+++ b/frontend/editor/src/core/components/tools/ToolPanel.css
@@ -201,6 +201,13 @@
border-color: var(--border-subtle) !important;
}
+/* The collapse/expand toggle keeps a stable identity across the collapsed strip
+ and the expanded header, so a view transition translates it between the two
+ (same size) instead of cross-fading/scaling it ("big then small"). */
+.tool-panel__toggle-vt {
+ view-transition-name: sidebar-toggle;
+}
+
.tool-panel__expand-btn svg {
color: var(--text-secondary) !important;
}
@@ -271,6 +278,22 @@
width: 100%;
}
+/* Search that separates the Policies section from the Tools list below it. */
+.tool-panel__between-search {
+ padding: 0.5rem 0.75rem 0.25rem;
+ border-top: 1px solid var(--border-subtle, var(--color-border));
+}
+
+.tool-panel__between-search .search-input-container {
+ width: 100%;
+ margin-bottom: 0;
+}
+
+/* Slightly recessed search field so it reads as distinct from the panel. */
+.tool-panel__between-search input {
+ background-color: var(--bg-muted);
+}
+
.tool-panel__active-tool-pill {
display: inline-flex;
align-items: center;
diff --git a/frontend/editor/src/core/constants/featureFlags.ts b/frontend/editor/src/core/constants/featureFlags.ts
index 3a2e3d7a2..0ada1cc67 100644
--- a/frontend/editor/src/core/constants/featureFlags.ts
+++ b/frontend/editor/src/core/constants/featureFlags.ts
@@ -4,11 +4,18 @@
*/
/**
- * Watched Folders (a.k.a. Watched Folders). Disabled for now — gates both the
- * custom workbench registration (seeding, URL sync, view) and the sidebar
- * entry point, so the feature is unreachable from the UI. Flip to `true` to
- * restore access.
+ * Watched Folders. Disabled for now — gates both the custom workbench
+ * registration (seeding, URL sync, view) and the sidebar entry point, so the
+ * feature is unreachable from the UI. Flip to `true` to restore access.
*/
// Annotated as `boolean` (not the literal `false`) so call sites aren't treated
// as constant/unreachable conditions by the type checker and linter.
export const WATCHED_FOLDERS_ENABLED: boolean = false;
+
+/**
+ * Policies — a proprietary, automation-backed feature (like Watched Folders but
+ * backend-driven, with non-folder triggers). The implementation lives under
+ * `proprietary/`; this core value stays `false` so the shared sidebar entry
+ * never appears in the open-source build.
+ */
+export const POLICIES_ENABLED: boolean = false;
diff --git a/frontend/editor/src/core/hooks/useAllWatchedFolders.ts b/frontend/editor/src/core/hooks/useAllWatchedFolders.ts
index 8abc81a46..b1dbc2f57 100644
--- a/frontend/editor/src/core/hooks/useAllWatchedFolders.ts
+++ b/frontend/editor/src/core/hooks/useAllWatchedFolders.ts
@@ -17,7 +17,9 @@ export function useAllWatchedFolders(): WatchedFolder[] {
useEffect(() => {
const load = async () => {
try {
- setFolders(await watchedFolderStorage.getAllFolders());
+ // Policy-owned folders are managed by Policies, not shown here.
+ const all = await watchedFolderStorage.getAllFolders();
+ setFolders(all.filter((f) => !f.policyCategoryId));
} catch (err) {
console.error("Failed to load smart folders:", err);
}
diff --git a/frontend/editor/src/core/hooks/usePolicyFileBadges.ts b/frontend/editor/src/core/hooks/usePolicyFileBadges.ts
new file mode 100644
index 000000000..e3297f9bd
--- /dev/null
+++ b/frontend/editor/src/core/hooks/usePolicyFileBadges.ts
@@ -0,0 +1,10 @@
+import type { FileItemPolicyRef } from "@app/components/shared/FileSidebarFileItem";
+
+/**
+ * Policies that have run on each file, keyed by fileId — drives the shield
+ * badges in the file sidebar. Empty in core; the proprietary build shadows this
+ * with an implementation backed by the policy run store.
+ */
+export function usePolicyFileBadges(): Map {
+ return new Map();
+}
diff --git a/frontend/editor/src/core/tests/helpers/api-stubs.ts b/frontend/editor/src/core/tests/helpers/api-stubs.ts
index a8291a181..1618e8fa2 100644
--- a/frontend/editor/src/core/tests/helpers/api-stubs.ts
+++ b/frontend/editor/src/core/tests/helpers/api-stubs.ts
@@ -248,6 +248,14 @@ export async function mockAppApis(
await page.route("**/api/v1/info/wau", (route: Route) =>
route.fulfill({ json: { count: 0 } }),
);
+
+ // Policies (proprietary): the reconcile fires GET /api/v1/policies on app
+ // load. Return an empty list so the stubbed (backend-free) env stays clean —
+ // no failed request polluting the console, and the auto-run controller has
+ // nothing to dispatch.
+ await page.route("**/api/v1/policies", (route: Route) =>
+ route.fulfill({ json: [] }),
+ );
}
/**
diff --git a/frontend/editor/src/core/types/watchedFolders.ts b/frontend/editor/src/core/types/watchedFolders.ts
index adfdc1640..ce8f7374e 100644
--- a/frontend/editor/src/core/types/watchedFolders.ts
+++ b/frontend/editor/src/core/types/watchedFolders.ts
@@ -25,6 +25,9 @@ export interface WatchedFolder {
hasOutputDirectory?: boolean; // true when a local FS output folder is configured
/** Where input files come from. Default: 'idb' (dropped/sidebar files stay in browser). */
inputSource?: "idb" | "local-folder";
+ /** Set when this folder is the backing store for a Policy (its category id).
+ * Policy-owned folders are filtered out of the Watched Folders UI. */
+ policyCategoryId?: string;
}
export interface FolderFileMetadata {
diff --git a/frontend/editor/src/proprietary/components/policies/Policies.css b/frontend/editor/src/proprietary/components/policies/Policies.css
new file mode 100644
index 000000000..fc6e24324
--- /dev/null
+++ b/frontend/editor/src/proprietary/components/policies/Policies.css
@@ -0,0 +1,438 @@
+/* ============================ Policies ============================ */
+/* The Policies surface is docked in the right tool sidebar: a list section */
+/* above Tools, a detail takeover that replaces Tools when a policy is open, */
+/* and a collapsed-rail of policy icons. */
+/* */
+/* Chrome (headers, cards, buttons, badges, chips, lists, steps…) uses SUI */
+/* (@shared/components). The bespoke .pol-* bits below are thin layout */
+/* scaffolding + the collapsed rail; spacing snaps to the SUI --space-* */
+/* scale and colour to the SUI token set so it reads as one product. */
+
+/* ---- List ---- */
+.pol-list {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+}
+/* Header row: optional leading control (sidebar collapse) + the SectionHeader,
+ mirroring the back-button + title layout inside an open policy. */
+.pol-list-head {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ padding: var(--space-2) var(--space-3);
+}
+.pol-list-head .sui-sectionhdr {
+ flex: 1;
+ min-width: 0;
+}
+/* Small "what is a policy?" info button on the header. */
+/* Bare info icon matching the tool-step affordance (LocalIcon, no chrome). */
+.pol-info-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ padding: 0;
+ border: none;
+ background: none;
+ cursor: pointer;
+ transition: opacity var(--motion-fast);
+}
+.pol-info-btn:hover {
+ opacity: 0.7;
+}
+.pol-list-rows {
+ display: flex;
+ flex-direction: column;
+ padding: var(--space-1) var(--space-1_5);
+ gap: 0.0625rem;
+}
+/* A policy row: tinted icon tile + label + trailing status/CTA. */
+.pol-row {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ width: 100%;
+ padding: var(--space-1_5) var(--space-2);
+ border: none;
+ border-radius: var(--radius-lg);
+ background: transparent;
+ cursor: pointer;
+ text-align: left;
+ transition: background var(--motion-fast);
+}
+.pol-row:hover {
+ background: var(--color-bg-hover);
+}
+.pol-row:focus-visible {
+ outline: 2px solid var(--color-blue);
+ outline-offset: -2px;
+}
+.pol-row-label {
+ flex: 1;
+ min-width: 0;
+ font-size: 0.8125rem;
+ font-weight: 500;
+ color: var(--color-text-1);
+}
+.pol-row-trail {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-1);
+ margin-left: auto;
+}
+/* Unconfigured rows: a quiet blue "Set up" call-to-action instead of a status pill. */
+.pol-row-setup {
+ font-size: 0.6875rem;
+ font-weight: 600;
+ color: var(--color-blue);
+}
+/* Trailing drill-in chevron on each policy row (after the status / CTA). */
+.pol-row-chevron {
+ color: var(--color-text-4);
+ flex-shrink: 0;
+}
+
+/* Retry button on a failed activity row. */
+/* Expandable error text in the activity feed — long backend errors are clamped
+ and collapsed by default so they don't blow up the row. */
+.pol-activity-error {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.125rem;
+}
+.pol-activity-error__text {
+ white-space: pre-wrap;
+ word-break: break-word;
+}
+.pol-activity-error__text--clamped {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+.pol-activity-error__toggle {
+ border: none;
+ background: none;
+ padding: 0;
+ font-size: inherit;
+ font-weight: 600;
+ color: var(--color-blue);
+ cursor: pointer;
+}
+.pol-activity-error__toggle:hover {
+ text-decoration: underline;
+}
+
+/* Locked "Coming soon" row — muted, not interactive. */
+.pol-row--soon {
+ opacity: 0.55;
+ cursor: default;
+}
+.pol-row--soon:hover {
+ background: transparent;
+}
+.pol-row-soon {
+ font-size: 0.6875rem;
+ font-weight: 500;
+ color: var(--color-text-4);
+ white-space: nowrap;
+}
+
+/* In-progress activity icon spins gently. */
+.pol-spin {
+ animation: pol-spin 1.2s linear infinite;
+}
+@keyframes pol-spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* ---- Locked, per-tool config (PolicyToolConfig): one section per tool ---- */
+.pol-tool-config {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+}
+.pol-tool-head {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ padding: var(--space-3);
+}
+.pol-tool-icon {
+ display: inline-flex;
+ align-items: center;
+ color: var(--color-text-3);
+}
+.pol-tool-name {
+ font-size: 0.8125rem;
+ font-weight: 600;
+ color: var(--color-text-1);
+ margin-right: auto;
+}
+.pol-tool-body {
+ padding: 0 var(--space-3) var(--space-3);
+ border-top: 1px solid var(--color-border);
+ padding-top: var(--space-3);
+}
+
+/* ---- Detail container (wizard / narrative / settings share this) ---- */
+.pol-detail {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ min-height: 0;
+ max-width: 32rem;
+ width: 100%;
+}
+
+/* ---- Step indicator (wraps a SUI StepIndicator) ---- */
+.pol-steps {
+ padding: var(--space-3) var(--space-5);
+ border-bottom: 1px solid var(--color-border);
+}
+
+/* ---- Scroll body ---- */
+.pol-scroll {
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+ padding: var(--space-3) var(--space-5);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+}
+.pol-desc {
+ font-size: 0.8125rem;
+ line-height: 1.5;
+ color: var(--color-text-4);
+ margin: 0;
+}
+.pol-section-label {
+ font-size: 0.6875rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--color-text-4);
+ /* Bottom gap so the label doesn't hug its card/chips. */
+ margin: 0 0 var(--space-2);
+}
+
+/* ---- Fields (PolicyFieldRow) — row inset matches SUI ListRow ---- */
+.pol-field {
+ padding: 0.7rem 0.875rem;
+ background: var(--color-surface);
+}
+.pol-field:not([data-first]) {
+ border-top: 1px solid var(--color-border);
+}
+.pol-field-label {
+ font-size: 0.8125rem;
+ font-weight: 500;
+ color: var(--color-text-1);
+}
+.pol-field-count {
+ font-size: 0.6875rem;
+ color: var(--color-text-4);
+}
+.pol-field-chips-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: var(--space-2);
+}
+.pol-field-chips {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-1_5);
+}
+
+/* ---- Sources ---- */
+.pol-source {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ padding: 0.7rem 0.875rem;
+ cursor: pointer;
+ background: var(--color-surface);
+}
+.pol-source:not([data-first]) {
+ border-top: 1px solid var(--color-border);
+}
+
+/* ---- Doc types ---- */
+.pol-link {
+ font-size: 0.75rem;
+ font-weight: 500;
+ color: var(--color-blue);
+ background: none;
+ border: none;
+ padding: 0;
+ cursor: pointer;
+}
+.pol-doctypes-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.7rem 0.875rem;
+}
+.pol-doctypes {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+ padding: var(--space-2) 0.875rem var(--space-3);
+ border-top: 1px solid var(--color-border);
+}
+
+/* ---- Summary ---- */
+.pol-summary-head {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ margin-bottom: var(--space-2);
+}
+.pol-summary-title {
+ font-size: 0.8125rem;
+ font-weight: 600;
+ color: var(--color-text-1);
+}
+.pol-summary-rows {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-1_5);
+}
+/* Muted placeholder for an unset summary value (e.g. no reviewer chosen). */
+.pol-muted {
+ color: var(--color-text-4);
+}
+
+/* ---- Enforces rule flow (wraps a SUI ChipFlow) ---- */
+.pol-rule-flow {
+ margin-bottom: var(--space-2);
+}
+
+/* ---- Meta / note ---- */
+.pol-meta-row {
+ display: flex;
+ gap: var(--space-3);
+ padding-top: var(--space-2);
+ border-top: 1px solid var(--color-border);
+}
+.pol-meta-item {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-1_5);
+ font-size: 0.75rem;
+ color: var(--color-text-4);
+}
+.pol-note {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ margin-top: var(--space-2);
+ padding: var(--space-2) var(--space-3);
+ border-radius: var(--radius-lg);
+ background: var(--color-bg-muted);
+ font-size: 0.75rem;
+ color: var(--color-text-4);
+}
+
+/* ---- Stats: one grouped card with three divided columns. ---- */
+.pol-stats {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+}
+.pol-stat {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-0_5);
+ padding: var(--space-3) var(--space-2);
+ text-align: center;
+}
+.pol-stat:not(:first-child) {
+ border-left: 1px solid var(--color-border);
+}
+.pol-stat-value {
+ font-size: 1rem;
+ font-weight: 600;
+ line-height: 1.1;
+ color: var(--color-text-1);
+}
+.pol-stat-label {
+ font-size: 0.6875rem;
+ color: var(--color-text-4);
+}
+
+/* ---- Footer (hosts SUI Buttons) ---- */
+.pol-footer {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ padding: var(--space-3) var(--space-5);
+ border-top: 1px solid var(--color-border);
+ flex-shrink: 0;
+}
+.pol-footer-end {
+ justify-content: flex-end;
+}
+
+/* ---- Detail takeover (fills the rail when a policy is open) ---- */
+.pol-takeover {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+/* ---- Collapsed rail policy icons ---- */
+.pol-crail {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-1);
+ flex-shrink: 0;
+}
+.pol-crail-btn {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.25rem;
+ height: 2.25rem;
+ padding: 0;
+ border: none;
+ border-radius: var(--radius-md);
+ background: transparent;
+ color: var(--color-text-3);
+ cursor: pointer;
+ transition: background var(--motion-fast);
+}
+.pol-crail-btn:hover {
+ background: var(--color-blue-light);
+}
+.pol-crail-btn[data-status="active"] {
+ color: var(--color-blue);
+}
+.pol-crail-btn[data-status="paused"] {
+ color: var(--color-amber);
+}
+.pol-crail-dot {
+ position: absolute;
+ top: 0.1rem;
+ right: 0.1rem;
+ width: 0.55rem;
+ height: 0.55rem;
+ border-radius: 50%;
+ border: 2px solid var(--bg-toolbar, var(--color-surface));
+}
+.pol-crail-dot[data-status="active"] {
+ background: var(--color-green);
+}
+.pol-crail-dot[data-status="paused"] {
+ background: var(--color-amber);
+}
diff --git a/frontend/editor/src/proprietary/components/policies/Policies.stories.tsx b/frontend/editor/src/proprietary/components/policies/Policies.stories.tsx
new file mode 100644
index 000000000..863501000
--- /dev/null
+++ b/frontend/editor/src/proprietary/components/policies/Policies.stories.tsx
@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { PolicyDetailPanel } from "@app/components/policies/PolicyDetailPanel";
+import { PoliciesSection } from "@app/components/policies/PoliciesSidebar";
+import { POLICY_CATEGORIES, POLICY_CONFIG } from "@app/data/policyDefinitions";
+import type { PolicyActivityItem, PolicyStats } from "@app/types/policies";
+import "@app/components/policies/Policies.css";
+
+/**
+ * The Policies surface lives in the editor's right tool sidebar. These stories
+ * render the three rich detail surfaces (narrative / setup wizard / settings)
+ * inside a frame the width of the rail when a policy is open (25rem), so the
+ * SUI composition can be reviewed in isolation — no app shell, login, or
+ * backend required. Toggle the Storybook theme switcher to check dark mode.
+ */
+const RAIL_WIDTH = "25rem";
+
+/** Frame that mimics the right rail's open width + surface so the panel reads true. */
+function RailFrame({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+const ingestion = POLICY_CATEGORIES.find((c) => c.id === "ingestion")!;
+const security = POLICY_CATEGORIES.find((c) => c.id === "security")!;
+
+// Illustrative activity/stats for the static stories. In the app these are
+// derived live from the user's real uploaded files (see policyLiveData).
+const sampleActivity: PolicyActivityItem[] = [
+ {
+ doc: "MSA_Acme_2026.pdf",
+ action: "1.2 MB • enforced on upload",
+ time: "2h ago",
+ status: "enforced",
+ },
+ {
+ doc: "scan_002.pdf",
+ action: "Low confidence • flagged for review",
+ time: "Yesterday",
+ status: "flagged",
+ },
+];
+const sampleStats: PolicyStats = {
+ enforced: 1284,
+ dataProcessed: "3.2 GB",
+ activeFor: "18d",
+};
+
+const noop = () => {};
+
+const meta: Meta = {
+ title: "Editor/Policies",
+ parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+/** Configured policy, running — Enforces / Activity / Stats narrative. */
+export const DetailActive: Story = {
+ render: () => (
+
+
+
+ ),
+};
+
+/** Configured policy, paused — amber accent + warning badge. */
+export const DetailPaused: Story = {
+ render: () => (
+
+
+
+ ),
+};
+
+/** Read-only view for a member without configure permission. */
+export const DetailManaged: Story = {
+ render: () => (
+
+
+
+ ),
+};
+
+/** The policy list section (above Tools). */
+export const ListSection: Story = {
+ render: () => (
+
+
+
+ ),
+};
+
+// Note: the setup + edit wizard now embeds the Watch Folders automation builder
+// (its Workflow step), which needs the ToolWorkflow context — so the wizard is
+// exercised in-app, not via an isolated story here.
diff --git a/frontend/editor/src/proprietary/components/policies/PoliciesSidebar.test.tsx b/frontend/editor/src/proprietary/components/policies/PoliciesSidebar.test.tsx
new file mode 100644
index 000000000..0eabd502f
--- /dev/null
+++ b/frontend/editor/src/proprietary/components/policies/PoliciesSidebar.test.tsx
@@ -0,0 +1,152 @@
+import "fake-indexeddb/auto";
+import type { ReactNode } from "react";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+
+// The shared Tooltip (used by the "what is a policy?" info button) pulls in
+// preferences/sidebar contexts we don't set up here — passthrough it.
+vi.mock("@app/components/shared/Tooltip", () => ({
+ Tooltip: ({ children }: { children: ReactNode }) => children,
+}));
+
+// The wizard's Workflow step embeds the Watch Folders automation builder, which
+// needs the ToolWorkflow context. Mock it: a stub that wires the save trigger to
+// hand back the seed automation, so the wizard's submit still completes.
+vi.mock("@app/components/policies/PolicyWorkflowStep", () => ({
+ AutomationMode: { CREATE: "create", EDIT: "edit", SUGGESTED: "suggested" },
+ PolicyWorkflowStep: (props: {
+ automation: unknown;
+ saveTriggerRef: { current: (() => void) | null };
+ onComplete: (automation: unknown, toolRegistry: unknown) => void;
+ }) => {
+ props.saveTriggerRef.current = () => props.onComplete(props.automation, {});
+ return null;
+ },
+}));
+
+// The backend is the source of truth, but these UI tests run offline: list
+// rejects (so the mount reconcile keeps the local cache), while save/delete
+// resolve so the enable flow completes.
+vi.mock("@app/services/policyApi", () => ({
+ listPolicies: vi.fn().mockRejectedValue(new Error("offline")),
+ savePolicy: vi.fn().mockImplementation(async (p: { id?: string }) => ({
+ ...p,
+ id: p.id && p.id.length > 0 ? p.id : "be-test",
+ })),
+ getPolicy: vi.fn(),
+ deletePolicy: vi.fn().mockResolvedValue(undefined),
+ runStoredPolicy: vi.fn(),
+ runPolicyPipeline: vi.fn(),
+ getPolicyRun: vi.fn(),
+}));
+
+// Enabling a policy creates its backing Watched Folders WatchedFolder (IndexedDB);
+// jsdom's crypto lacks randomUUID, which watchedFolderStorage uses for folder ids.
+if (typeof globalThis.crypto?.randomUUID !== "function") {
+ const orig = globalThis.crypto;
+ vi.stubGlobal("crypto", {
+ getRandomValues: orig?.getRandomValues?.bind(orig),
+ randomUUID: () =>
+ `p-${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`,
+ });
+}
+import {
+ PoliciesSection,
+ PolicyDetailTakeover,
+ usePolicyDetailActive,
+} from "@app/components/policies/PoliciesSidebar";
+import { resetPolicySelection } from "@app/components/policies/policySelectionStore";
+
+/**
+ * Mirrors how RightSidebar swaps the policy list for the detail takeover: the
+ * list shows above Tools when nothing is open, the takeover replaces it when a
+ * policy is selected.
+ */
+function PoliciesHost() {
+ const active = usePolicyDetailActive();
+ return active ? : ;
+}
+
+function renderHost() {
+ return render(
+
+
+ ,
+ );
+}
+
+describe("Policies right-sidebar surface", () => {
+ beforeEach(() => {
+ localStorage.clear();
+ // Seed a configured Security policy (the only live category) in the local
+ // cache. The backend list is mocked to reject (offline), so the mount
+ // reconcile leaves it in place — giving the narrative tests a policy to open.
+ localStorage.setItem(
+ "stirling-policies-state",
+ JSON.stringify({
+ security: {
+ configured: true,
+ status: "active",
+ sources: ["editor"],
+ scopeTypes: [],
+ reviewerEmail: "",
+ fieldValues: {},
+ },
+ }),
+ );
+ resetPolicySelection();
+ });
+
+ it("renders the policy list with every category", () => {
+ renderHost();
+ expect(screen.getByText("Policies")).toBeInTheDocument();
+ for (const label of [
+ "Ingestion",
+ "Security",
+ "Compliance",
+ "Routing",
+ "Retention",
+ ]) {
+ expect(screen.getByText(label)).toBeInTheDocument();
+ }
+ });
+
+ it("shows Security as active and the unbuilt categories as Coming soon", () => {
+ renderHost();
+ expect(screen.getAllByText("Active").length).toBeGreaterThanOrEqual(1);
+ // Ingestion, Compliance, Routing, Retention are locked for this release.
+ expect(screen.getAllByText("Coming soon")).toHaveLength(4);
+ });
+
+ it("does not open a Coming soon policy when its row is clicked", () => {
+ renderHost();
+ fireEvent.click(screen.getByText("Ingestion"));
+ // The locked row isn't a button — we stay on the list, nothing opens.
+ expect(screen.getByText("Policies")).toBeInTheDocument();
+ expect(screen.queryByText("Enforces")).not.toBeInTheDocument();
+ });
+
+ it("opens the narrative view when a live policy is clicked", () => {
+ renderHost();
+ fireEvent.click(screen.getByText("Security"));
+ expect(screen.getByText("Enforces")).toBeInTheDocument();
+ expect(screen.getByText("Edit Settings")).toBeInTheDocument();
+ });
+
+ it("shows an honest empty activity feed when no files have been uploaded", async () => {
+ renderHost();
+ fireEvent.click(screen.getByText("Security"));
+ expect(screen.getByText("Recent Activity")).toBeInTheDocument();
+ // Activity is derived from real uploads; with none, the empty state shows.
+ expect(await screen.findByText("No activity yet")).toBeInTheDocument();
+ });
+
+ it("returns to the list via the back button", () => {
+ renderHost();
+ fireEvent.click(screen.getByText("Security"));
+ expect(screen.getByText("Enforces")).toBeInTheDocument();
+ fireEvent.click(screen.getByLabelText("Back"));
+ expect(screen.getByText("Policies")).toBeInTheDocument();
+ });
+});
diff --git a/frontend/editor/src/proprietary/components/policies/PoliciesSidebar.tsx b/frontend/editor/src/proprietary/components/policies/PoliciesSidebar.tsx
new file mode 100644
index 000000000..2028063fe
--- /dev/null
+++ b/frontend/editor/src/proprietary/components/policies/PoliciesSidebar.tsx
@@ -0,0 +1,453 @@
+/**
+ * Proprietary implementation of the right-sidebar Policies surface.
+ *
+ * Shadows the core stubs at {@code core/components/policies/PoliciesSidebar.tsx}
+ * via the {@code @app/*} alias cascade. Three slots, all driven by the shared
+ * {@link policySelectionStore} so they stay in sync:
+ * • {@link PoliciesSection} — the collapsible policy list, rendered above the
+ * Tools section in {@code RightSidebar} when no policy is open.
+ * • {@link PolicyDetailTakeover} — the detail / wizard / settings view, which
+ * replaces the Tools area when a policy is open.
+ * • {@link PoliciesCollapsedButton} — the icon rail shown when the sidebar is
+ * collapsed; clicking an icon selects the policy and expands the rail.
+ */
+
+import { useState, useEffect, useMemo, type ReactNode } from "react";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { usePolicies } from "@app/hooks/usePolicies";
+import { usePolicyCatalog } from "@app/hooks/usePolicyCatalog";
+import { getPolicyAutomation } from "@app/services/policyFolders";
+import { watchedFolderStorage } from "@app/services/watchedFolderStorage";
+import { runsToActivity, runsToStats } from "@app/services/policyLiveData";
+import { usePolicyRuns } from "@app/components/policies/policyRunStore";
+import { runPolicyOnFile } from "@app/components/policies/usePolicyAutoRun";
+import type { FileId } from "@app/types/file";
+import type {
+ AutomationConfig,
+ AutomationOperation,
+} from "@app/types/automation";
+import type { WatchedFolder } from "@app/types/watchedFolders";
+import { POLICIES_ENABLED } from "@app/constants/featureFlags";
+import { Tooltip as AppTooltip } from "@app/components/shared/Tooltip";
+import { IconBadge } from "@shared/components/IconBadge";
+import {
+ deriveRowStatus,
+ STATUS_LABEL,
+ ROW_ACCENT,
+} from "@app/components/policies/policyStatus";
+import { StatusBadge } from "@shared/components/StatusBadge";
+import { SectionHeader } from "@shared/components/SectionHeader";
+import { PolicySetupWizard } from "@app/components/policies/PolicySetupWizard";
+import { PolicyDetailPanel } from "@app/components/policies/PolicyDetailPanel";
+import { PolicyDeleteConfirmModal } from "@app/components/policies/PolicyDeleteConfirmModal";
+import type { PolicyConfigResult } from "@app/types/policies";
+import {
+ usePolicySelection,
+ selectPolicy,
+ setPolicyDetailView,
+ closePolicy,
+} from "@app/components/policies/policySelectionStore";
+import "@app/components/policies/Policies.css";
+
+/** localStorage key persisting the Policies section's expand/collapse state. */
+const POLICIES_COLLAPSED_KEY = "stirling-policies-section-collapsed";
+
+/** Whether the right rail should host the Policies section. True in proprietary. */
+export function usePoliciesEnabled(): boolean {
+ return POLICIES_ENABLED;
+}
+
+/**
+ * Whether a policy is open — i.e. its detail view should take over the rail in
+ * place of the tool list. False when the feature is off or nothing is selected.
+ */
+export function usePolicyDetailActive(): boolean {
+ const { selectedId } = usePolicySelection();
+ return POLICIES_ENABLED && selectedId != null;
+}
+
+/** The collapsible policy list, rendered above the Tools section. */
+export function PoliciesSection({
+ leadingControl,
+}: {
+ /** Optional control rendered to the left of the header (e.g. the sidebar
+ * collapse button), mirroring the back-button + title in a policy. */
+ leadingControl?: ReactNode;
+} = {}) {
+ const pol = usePolicies();
+ const { categories } = usePolicyCatalog();
+ // Persist the expand/collapse state across refreshes.
+ const [expanded, setExpanded] = useState(() => {
+ try {
+ return localStorage.getItem(POLICIES_COLLAPSED_KEY) !== "1";
+ } catch {
+ return true;
+ }
+ });
+ const toggleExpanded = () =>
+ setExpanded((open) => {
+ const next = !open;
+ try {
+ localStorage.setItem(POLICIES_COLLAPSED_KEY, next ? "0" : "1");
+ } catch {
+ // Best-effort; ignore quota/availability failures.
+ }
+ return next;
+ });
+
+ if (!POLICIES_ENABLED) return null;
+
+ // The header tally counts every CONFIGURED policy (active + paused), not just
+ // the active ones.
+ const configuredCount = categories.filter(
+ (c) => pol.policies[c.id]?.configured,
+ ).length;
+
+ return (
+