diff --git a/src/routes/documents.pleading.new.tsx b/src/routes/documents.pleading.new.tsx
index 12bcf6b..14d1807 100644
--- a/src/routes/documents.pleading.new.tsx
+++ b/src/routes/documents.pleading.new.tsx
@@ -52,6 +52,54 @@ function PleadingNewPage() {
   const [serviceList, setServiceList] = useState<ServiceContact[]>([]);
   const [serviceListTitle, setServiceListTitle] = useState("SERVICE LIST");
 
+  // Client/case linkage for variable substitution
+  const [clientId, setClientId] = useState<string>("");
+  const [caseId, setCaseId] = useState<string>("");
+  const [clientOptions, setClientOptions] = useState<{ id: string; name: string }[]>([]);
+  const [caseOptions, setCaseOptions] = useState<{ id: string; case_number: string; title: string; client_id: string | null }[]>([]);
+  const [varCtx, setVarCtx] = useState<LoadedContext>({ clientFields: [], caseFields: [] });
+  const [chips, setChips] = useState<VarChip[]>([]);
+  const [chipFilter, setChipFilter] = useState("");
+
+  useEffect(() => {
+    (async () => {
+      const [{ data: cl }, { data: ks }] = await Promise.all([
+        supabase.from("clients").select("id, name").is("archived_at", null).order("name"),
+        supabase.from("cases").select("id, case_number, title, client_id").is("archived_at", null).order("case_number", { ascending: false }).limit(500),
+      ]);
+      setClientOptions((cl as any) || []);
+      setCaseOptions((ks as any) || []);
+    })();
+  }, []);
+
+  useEffect(() => {
+    (async () => {
+      const ctx = await loadPleadingContext(clientId || null, caseId || null);
+      setVarCtx(ctx);
+      setChips(buildChips(ctx));
+    })();
+  }, [clientId, caseId]);
+
+  const filteredCases = useMemo(
+    () => (clientId ? caseOptions.filter((k) => k.client_id === clientId) : caseOptions),
+    [caseOptions, clientId],
+  );
+
+  const filteredChips = useMemo(() => {
+    const q = chipFilter.trim().toLowerCase();
+    if (!q) return chips;
+    return chips.filter((c) => c.token.toLowerCase().includes(q) || c.label.toLowerCase().includes(q));
+  }, [chips, chipFilter]);
+
+  const copyChip = async (token: string) => {
+    try {
+      await navigator.clipboard.writeText(token);
+      toast.success(`Copied ${token}`);
+    } catch {
+      toast.error("Copy failed");
+    }
+  };
+
   // Attorney signature (loaded from profile)
   const [includeSignature, setIncludeSignature] = useState(true);
   const [sigBlock, setSigBlock] = useState("");