V48 (impl-only): Align Read UX with Deposit master-detail

Restructure /reads to deposit parity: compact header, pipelines table,
New compose detail with SHA source, Need free-text, Relevant/Irrelevant
path pickers, option cards (needinesses + total BTD), and settle.

Wire path steering through synthesize-options. Product surface tints:
Packs emerald, Deposit violet, Read orange; brand primary stays green.

Author: geraldarthurdavis

uapi/app/api/read/synthesize-options/dispatch-read-synthesis.ts

@@ -16,6 +16,10 @@ export type ReadSynthesisDispatchInput = {
   sourceBranch: string;
   sourceCommit: string | null;
   need: string;
+  /** Deposit forcedInclusions twin. */
+  relevantPaths?: string[];
+  /** Deposit forcedExclusions twin. */
+  irrelevantPaths?: string[];
 };
 
 export async function runReadOptionSynthesis(input: ReadSynthesisDispatchInput): Promise<void> {
@@ -24,6 +28,11 @@ export async function runReadOptionSynthesis(input: ReadSynthesisDispatchInput):
   storeCrossPhaseArtifact(exec, 'host', 'runId', input.runId);
   storeCrossPhaseArtifact(exec, 'pipeline', 'runId', input.runId);
   storeCrossPhaseArtifact(exec, 'pipeline', 'productPipeline', 'synthesize-reads-asset-packs-pipeline');
+  storeCrossPhaseArtifact(exec, 'read', 'relevantPaths', input.relevantPaths || []);
+  storeCrossPhaseArtifact(exec, 'read', 'irrelevantPaths', input.irrelevantPaths || []);
+  // Deposit steering keys so shared discovery filters can reuse exclusion law.
+  storeCrossPhaseArtifact(exec, 'deposit', 'forcedInclusions', input.relevantPaths || []);
+  storeCrossPhaseArtifact(exec, 'deposit', 'forcedExclusions', input.irrelevantPaths || []);
 
   const [owner, name] = input.repositoryFullName.split('/');
   const pipelineInput = {
@@ -33,6 +42,10 @@ export async function runReadOptionSynthesis(input: ReadSynthesisDispatchInput):
     repositoryFullName: input.repositoryFullName,
     sourceBranch: input.sourceBranch,
     sourceCommit: input.sourceCommit,
+    relevantPaths: input.relevantPaths || [],
+    irrelevantPaths: input.irrelevantPaths || [],
+    forcedInclusions: input.relevantPaths || [],
+    forcedExclusions: input.irrelevantPaths || [],
     repository: {
       owner,
       name,

uapi/app/api/read/synthesize-options/route.ts

@@ -64,6 +64,20 @@ export async function POST(request: Request) {
           : '';
   const sourceBranch = typeof body.sourceBranch === 'string' ? body.sourceBranch.trim() : 'main';
   const sourceCommit = typeof body.sourceCommit === 'string' ? body.sourceCommit.trim() : '';
+  const normalizePathList = (value: unknown): string[] =>
+    Array.isArray(value)
+      ? value
+          .filter((entry): entry is string => typeof entry === 'string')
+          .map((entry) => entry.trim())
+          .filter(Boolean)
+      : [];
+  // Deposit twin: relevant/irrelevant paths (also accept forcedInclusions/Exclusions).
+  const relevantPaths = normalizePathList(
+    body.relevantPaths ?? body.forcedInclusions ?? body.relevants,
+  );
+  const irrelevantPaths = normalizePathList(
+    body.irrelevantPaths ?? body.forcedExclusions ?? body.irrelevants,
+  );
   const requestedRunId =
     typeof body.runId === 'string' && UUID_PATTERN.test(body.runId) ? body.runId : randomUUID();
 
@@ -92,6 +106,8 @@ export async function POST(request: Request) {
       sourceBranch,
       sourceCommit: sourceCommit || null,
       needLength: need.length,
+      relevantPathCount: relevantPaths.length,
+      irrelevantPathCount: irrelevantPaths.length,
     },
     context: {
       source: 'read-synthesize-options',
@@ -101,6 +117,8 @@ export async function POST(request: Request) {
       repositoryFullName,
       sourceBranch,
       sourceCommit: sourceCommit || null,
+      relevantPaths,
+      irrelevantPaths,
     },
     started_at: new Date().toISOString(),
   });
@@ -132,6 +150,8 @@ export async function POST(request: Request) {
       sourceBranch,
       sourceCommit: sourceCommit || null,
       need,
+      relevantPaths,
+      irrelevantPaths,
     }),
   );
 

uapi/components/bitcode/routes/ProductRouteShell/ProductRouteShell.tsx

@@ -11,7 +11,15 @@ import {
   ShieldCheck,
 } from "lucide-react";
 
-type ProductRouteTone = "emerald" | "sky" | "violet";
+/**
+ * Product surface tints (secondary page wash). Brand primary remains Bitcode
+ * emerald green everywhere else (nav, CTAs, logo).
+ * - emerald → Packs (primary green secondary wash)
+ * - violet → Deposits (purple)
+ * - orange → Reads
+ * - sky → retained for non-product panels
+ */
+type ProductRouteTone = "emerald" | "sky" | "violet" | "orange";
 
 // Section (b) generic copy for the shell's rich tooltips.
 const ROUTE_METRIC_TOOLTIP_GENERIC =
@@ -89,16 +97,27 @@ const TONE_CLASSES: Record<ProductRouteTone, ToneClasses> = {
     panelAccent: "border-sky-300/15 bg-sky-300/[0.04] text-sky-100/85",
   },
   violet: {
-    page: "bg-[radial-gradient(circle_at_top_left,rgba(167,139,250,0.13),transparent_30%),linear-gradient(180deg,#050915_0%,#02050d_100%)]",
-    headerBorder: "border-violet-300/15",
-    eyebrow: "text-violet-200/80",
+    page: "bg-[radial-gradient(circle_at_top_left,rgba(167,139,250,0.16),transparent_30%),linear-gradient(180deg,#050915_0%,#02050d_100%)]",
+    headerBorder: "border-violet-300/18",
+    eyebrow: "text-violet-200/85",
     activeStep:
-      "border-violet-300/38 bg-violet-300/12 shadow-[0_0_24px_rgba(167,139,250,0.12)]",
+      "border-violet-300/38 bg-violet-300/12 shadow-[0_0_24px_rgba(167,139,250,0.14)]",
     inactiveStep:
       "border-white/10 bg-white/[0.035] hover:border-violet-300/24 hover:bg-violet-300/[0.06]",
     focusRing: "focus-visible:ring-violet-300/55",
     panelAccent: "border-violet-300/15 bg-violet-300/[0.04] text-violet-100/85",
   },
+  orange: {
+    page: "bg-[radial-gradient(circle_at_top_left,rgba(251,146,60,0.16),transparent_30%),linear-gradient(180deg,#050915_0%,#02050d_100%)]",
+    headerBorder: "border-orange-300/18",
+    eyebrow: "text-orange-200/85",
+    activeStep:
+      "border-orange-300/40 bg-orange-300/12 shadow-[0_0_24px_rgba(251,146,60,0.14)]",
+    inactiveStep:
+      "border-white/10 bg-white/[0.035] hover:border-orange-300/26 hover:bg-orange-300/[0.06]",
+    focusRing: "focus-visible:ring-orange-300/55",
+    panelAccent: "border-orange-300/16 bg-orange-300/[0.05] text-orange-50/90",
+  },
 };
 
 export type ProductRouteMetric = {

uapi/components/deposits/DepositOptionCard/DepositOptionCard.tsx

@@ -78,7 +78,7 @@ export function DepositOptionCard(props: DepositOptionCardProps) {
       data-testid={`deposit-option-${option.kind}`}
       className={`grid min-w-0 gap-4 border px-4 py-4 ${
         reviewed
-          ? "border-emerald-300/38 bg-emerald-300/10"
+          ? "border-violet-300/38 bg-violet-300/10"
           : "border-white/10 bg-black/20"
       }`}
     >

uapi/components/deposits/DepositPageClient/DepositPageClient.tsx

@@ -457,7 +457,7 @@ export default function DepositPageClient() {
     <BitcodeShellBridgeProvider>
       <ProductRouteShell
         testId="route-shell-deposit"
-        tone="emerald"
+        tone="violet"
         label="Deposit"
         title="Depositing"
         summary="Synthesize, review, and deposit AssetPacks from your repository."

uapi/components/deposits/DepositPipelinesMaster/DepositPipelinesMaster.tsx

@@ -58,7 +58,7 @@ export function DepositPipelinesMaster({
             <button
               type="button"
               onClick={onCloseDetail}
-              className="inline-flex h-9 items-center gap-2 border border-white/10 bg-white/[0.04] px-3 text-xs font-medium uppercase tracking-[0.14em] text-neutral-200 transition hover:border-emerald-300/30 hover:bg-emerald-300/10"
+              className="inline-flex h-9 items-center gap-2 border border-white/10 bg-white/[0.04] px-3 text-xs font-medium uppercase tracking-[0.14em] text-neutral-200 transition hover:border-violet-300/30 hover:bg-violet-300/10"
               aria-label="Back to Deposit"
             >
               <ArrowLeft className="h-4 w-4" aria-hidden="true" />
@@ -80,7 +80,7 @@ export function DepositPipelinesMaster({
           <button
             type="button"
             onClick={onOpenCompose}
-            className="ml-auto inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-none border border-emerald-200/55 bg-[linear-gradient(180deg,rgba(52,211,153,0.95),rgba(16,185,129,0.88))] text-slate-950 shadow-[0_0_0_1px_rgba(167,243,208,0.35)_inset,0_12px_36px_rgba(16,185,129,0.42),0_0_28px_rgba(52,211,153,0.28)] transition hover:border-emerald-100/70 hover:bg-[linear-gradient(180deg,rgba(110,231,183,1),rgba(52,211,153,0.95))] hover:shadow-[0_0_0_1px_rgba(209,250,229,0.45)_inset,0_14px_40px_rgba(16,185,129,0.5),0_0_34px_rgba(52,211,153,0.38)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-200/70 focus-visible:ring-offset-2 focus-visible:ring-offset-[rgba(4,8,18,0.9)] active:translate-y-px"
+            className="ml-auto inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-none border border-violet-200/55 bg-[linear-gradient(180deg,rgba(167,139,250,0.95),rgba(139,92,246,0.88))] text-slate-950 shadow-[0_0_0_1px_rgba(196,181,253,0.35)_inset,0_12px_36px_rgba(139,92,246,0.42),0_0_28px_rgba(167,139,250,0.28)] transition hover:border-violet-100/70 hover:bg-[linear-gradient(180deg,rgba(196,181,253,1),rgba(167,139,250,0.95))] hover:shadow-[0_0_0_1px_rgba(221,214,254,0.45)_inset,0_14px_40px_rgba(139,92,246,0.5),0_0_34px_rgba(167,139,250,0.38)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-200/70 focus-visible:ring-offset-2 focus-visible:ring-offset-[rgba(4,8,18,0.9)] active:translate-y-px"
             aria-label="New deposit"
             title="New deposit"
             data-testid="deposit-open-compose"

uapi/components/deposits/DepositRouteStateAside/DepositRouteStateAside.tsx

@@ -74,7 +74,7 @@ export function DepositRouteStateAside({
           <div className="mt-3">
             <ProductRouteDisclosure
               title="Authority blockers"
-              tone="emerald"
+              tone="violet"
               summaryDescription={DEPOSIT_AUTHORITY_BLOCKERS_EXPLAINER}
             >
               {depositRouteSession.organizationPolicyWalletAuthority.aggregate.blockers.join(
@@ -105,7 +105,7 @@ export function DepositRouteStateAside({
         <div className="mt-3">
           <ProductRouteDisclosure
             title="Disclosure boundary"
-            tone="emerald"
+            tone="violet"
             summaryDescription={DEPOSIT_DISCLOSURE_BOUNDARY_EXPLAINER}
           >
             Visible: measurements, demand roots, source path roots, policy
@@ -118,7 +118,7 @@ export function DepositRouteStateAside({
           <ProductRouteProofDetail
             testId="deposit-expandable-proof-detail"
             title="Deposit proof detail"
-            tone="emerald"
+            tone="violet"
             roots={[
               {
                 id: "route-session-root",